css. Вопрос про позиционирование, или нет?

252
26 ноября 2016, 18:44

Очень долго искал, но не нашел ответ.

Можно ли как-либо абсолютно позиционированному элементу позиционироваться относительно body, если этот элемент имеет одного или несколько абсолютно позиционированных предков?

Проблема в том, что содержимое подпапок начиная с содержимого папки 3.1 (на скрине) не растягиваются на всю длину контента а только в пределах родителя.

вот так надо (сделано на скорую в фоторедакторе(ой ошибся с очередностью папок но суть не в этом)): кстати body простирается дальше вправо,просто так заскринил

Дерево папок на чекбоксах и по-другому сделать средствами css, html я не вижу как (ховеры присутствуют,но мне нужно чтобы была возможность закрепить отображения контента папок).

Есть 4 варианта решения как подсказали:

  • margin-right:-35px;
  • min-width: 75%;
  • white-space: nowrap;
  • right:10px;

К сожалению все эти способа не дают приемлемого результата. При уменьшении окна браузера не стягивается\съёживается контент адекватно. Да и выглядят тоже так себе.

Неужели это лучшее, что можно выжать в такой ситуации? может можно сделать тоже самое по-другому,не на чекбоксах или еще как? эх..

Код громоздок, не знаю стоит ли скидывать, и куда... jsfiddle?

body { 
  background-color: #2e3436; 
  font-size: 100%; 
} 
b::selection, 
a::selection, 
img::selection { 
  background-color: rgba(153, 204, 255, 0.5); 
} 
b { 
  font-family: Verdana, Arial, Helvetica, sans-serif; 
} 
img { 
  height: 16px; 
  width: 16px; 
  vertical-align: middle; 
  background-color: #ccc; 
  border: 3px solid #ccc; 
  border-radius: 2px; 
} 
li:hover img { 
  background-color: white; 
  border: 3px solid white; 
} 
a:active { 
  color: white; 
  position: relative; 
  top: 1px; 
} 
ul { 
  margin: 0; 
  padding: 0; 
} 
/*---огибание текста ссылок фавиконок---*/ 
 
li a { 
  display: inline-block; 
  margin-left: 25px; 
  padding: 2px 0; 
} 
li img { 
  /*чтобы ссылки правильно 
		огибали фавиконы*/ 
  position: absolute; 
} 
/*...........*/ 
 
a { 
  color: #ccc; 
  text-decoration: none; 
} 
a:hover { 
  text-decoration: underline; 
} 
ul li:hover { 
  /*ul- чтобы побороть специфичность селектора*/ 
  background-color: rgba(204, 204, 204, 0.2); 
  border-radius: 2px; 
  box-shadow: 0 0 10px rgba(204, 204, 204, 0.2); 
} 
/*------ новые точки списка ------*/ 
 
ul { 
  list-style: none; 
} 
li { 
  position: relative; 
  padding-left: 15px; 
  bord er: 1px solid red; 
} 
li:before { 
  content: ''; 
  position: absolute; 
  top: 9px; 
  left: 0; 
  width: 9px; 
  min-height: 9px; 
  margin-top: -4px; 
  border-radius: 50% 14px; 
  border: 1px solid #ccc; 
} 
li:hover:before { 
  box-shadow: 0 0 4px rgba(225, 225, 220, 0.85); 
  background: white; 
  border: 1px solid white; 
} 
/*---чередующяяся подсветка списка---*/ 
 
li:nth-child(even) { 
  background-color: rgba(225, 225, 220, 0.08); 
} 
/*--------/// side-list ///-----------*/ 
 
label { 
  transition: 0.4s; 
  transition-timing-function: ease-in-out; 
} 
.folder b { 
  font-size: 90%; 
} 
.folder_c li { 
  width: auto; 
  cursor: default; 
} 
.folder1 { 
  border-radius: 0 14px 0 0; 
} 
/*-----точечки папок----*/ 
 
label:before { 
  content: ''; 
  position: absolute; 
  left: 5px; 
  width: 9px; 
  min-height: 9px; 
  margin-top: 4px; 
  border-radius: 50%; 
  border: 1px solid #ccc; 
  vertical-align: center; 
} 
input:checked +label:before { 
  box-shadow: 0 0 4px rgba(225, 225, 220, 0.85); 
  background: white; 
  border: 1px solid white; 
} 
/*---------*/ 
 
.side-list { 
  float: left; 
  width: 150px; 
  border: 1px solid #ccc; 
  min-height: 150px; 
  border-radius: 0 15px 15px 0; 
  margin-left: 13px; 
} 
/*/////////////////////////*/ 
 
.folder { 
  padding: 0; 
  border-bottom: 1px solid #ccc; 
  color: #ccc; 
  cursor: pointer; 
} 
.folder_c { 
  /*folder content*/ 
  display: none; 
  background-color: rgba(46, 49, 50, 0.9); 
  padding: 8px; 
  max-width: 1200px; 
  border-radius: 5px; 
  box-shadow: 3px 3px 6px rgba(0, 0, 0, 0.50); 
  position: absolute; 
  left: 160px; 
  margin-top: -25px; 
  margin-right: 8px; 
  border: 1px solid rgba(204, 204, 204, 0.55); 
  padding-top: 10px; 
  z-index: 1; 
  /*из-за кастомных точечек списков фона*/ 
} 
/*...........*/ 
 
.folder:hover { 
  background-color: #ccc; 
} 
.folder:hover> b { 
  color: #2e3436; 
} 
label { 
  display: block; 
  padding: 5px 10px; 
  width: auto; 
} 
input:checked + label { 
  background-color: #ccc; 
  color: #2e3436; 
} 
/*...........*/ 
 
.folder { 
  /*для лейбла чтоб выглядил как блок*/ 
  display: block; 
  padding: 5px 10px; 
  margin: 0; 
} 
.pre-folder:hover >.folder_c { 
  display: block; 
} 
input:checked +label+ div { 
  /* не удалять*/ 
  display: block; 
} 
input 
/*:not(checked)*/ 
 
{ 
  /* скрывает чекбокс*/ 
  position: absolute; 
  opacity: 0; 
} 
/*-----------*/
<!DOCTYPE html> 
<html> 
 
<head> 
  <meta charset="UTF-8"> 
  <title>Bookmarks</title> 
  <link href="style.css" rel="stylesheet"> 
</head> 
 
<body> 
  <div class="side-list"> 
    <input type="checkbox" id="folder1" /> 
    <label class="folder folder1" for="folder1"> 
      <b>Folder 1</b> 
      <div class="folder_c"> 
        <ul> 
          <li> 
            <img width="16" src="index_files/favicon (1).ico"> 
            <a href="https://www.amazon.com/Monoprice-Charge-Transfer-Protection-Switch/dp/B00Y42IE76/">Amazon.com: Monoprice USB 2.0 to Micro B Sync &amp; Fast Charge Cable with Data Transfer Protection On/Off Switch - 30/20 AWG 4.5ft (1): Computers &amp; Accessories</a> 
          </li> 
          <li> 
            <img width="16" src="index_files/favicon (2).ico"> 
            <a href="http://www.ebay.com/itm/USB-Male-to-Female-Charging-Switch-Data-Cable-for-Samsung-Galaxy-Tab-P7500-P7510-/271524739619?">USB Male to Female Charging Switch Data Cable for Samsung Galaxy Tab P7500 P7510 | eBay</a> 
          </li> 
          <li title="base64 иконка"> 
            <img width="16" src=""> 
            <a href="https://www.qwant.com/web"> Веб-сайт Qwant</a> 
          </li> 
          <li title="локальная иконка"> 
            <img width="16" src="index_files/favicon.ico"> 
            <a href="https://www.gigablast.com/">Gigablast - An Alternative Open Source Search Engine</a> 
          </li> 
          <li> 
            <a href="https://search.disconnect.me/">Disconnect Search: Search privately using your favorite search engine</a> 
          </li> 
        </ul> 
      </div> 
    </label> 
 
    <input type="checkbox" id="folder2" /> 
    <label class="folder" for="folder2"> 
      <b>FOLDER 2</b> 
      <div class="folder_c"> 
        <ul> 
          <li> 
            <img width="16" src="index_files/favicon (1).ico"> 
            <a href="https://www.amazon.com/Monoprice-Charge-Transfer-Protection-Switch/dp/B00Y42IE76/">Amazon.com...</a> 
          </li> 
          <li> 
            <img width="16" src="index_files/favicon (2).ico"> 
            <a href="http://www.ebay.com/itm/USB-Male-to-Female-Charging-Switch-Data-Cable-for-Samsung-Galaxy-Tab-P7500-P7510-/271524739619?">USB Male to Female...</a> 
          </li> 
        </ul> 
      </div> 
    </label> 
    <!-- ПАПКИ ВСТАВЛЯТЬ ТУТ --> 
    <!-- ТЕСТ --> 
    <div class="pre-folder"> 
      <input type="checkbox" id="folder3" /> 
      <label class="folder" for="folder3"> 
        <b>FOLDER 3</b> 
      </label> 
      <div class="folder_c"> 
        <ul> 
          <li> 
            <img width="16" src="index_files/favicon (1).ico"> 
            <a href="https://www.amazon.com/Monoprice-Charge-Transfer-Protection-Switch/dp/B00Y42IE76/">Amazon.comrrrrrrrrrrrrrr 
						rrrrrrrrrrrrrrrrrrrrrr 
						rrrrrrrrrrrrrrrrrrrrrrrrr 
						rrrrrrrrrrrrrrrrrrrrrr...</a> 
          </li> 
          <li> 
            <img width="16" src="index_files/favicon (2).ico"> 
            <a href="http://www.ebay.com/itm/USB-Male-to-Female-Charging-Switch-Data-Cable-for-Samsung-Galaxy-Tab-P7500-P7510-/271524739619?">USB Male to Female...</a> 
          </li> 
          <!--2--> 
          <div class="rel"> 
            <div class="pre-folder"> 
              <input type="checkbox" id="folder4" /> 
              <label class="folder" for="folder4"> 
                <b>FOLDER 3.1</b> 
              </label> 
              <div class="folder_c"> 
                <ul> 
                  <li> 
                    <img width="16" src="index_files/favicon (1).ico"> 
                    <a href="https://www.amazon.com/Monoprice-Charge-Transfer-Protection-Switch/dp/B00Y42IE76/">Amazon.comrrrrrrrrrrrrrr 
									rrrrrrrrrrrrrrrrrrrrrr 
									rrrrrrrrrrrrrrrrrrrrrrrrr 
									rrrrrrrrrrrrrrrrrrrrrr</a> 
                  </li> 
 
                  <!--3--> 
                  <div class="pre-folder"> 
                    <input type="checkbox" id="folder5" /> 
                    <label class="folder" for="folder5"> 
                      <b>FOLDER 3.2</b> 
                    </label> 
                    <div class="folder_c"> 
                      <ul> 
                        <li> 
                          <img width="16" src="index_files/favicon (1).ico"> 
                          <a href="https://www.amazon.com/Monoprice-Charge-Transfer-Protection-Switch/dp/B00Y42IE76/">Amazon.comrrrrrrrrrrrrrr 
												rrrrrrrrrrrrrrrrrrrrrr 
												rrrrrrrrrrrrrrrrrrrrrrrrr 
												rrrrrrrrrrrrrrrrrrrrrr</a> 
                        </li> 
                        <li> 
                          <img width="16" src="index_files/favicon (2).ico"> 
                          <a href="http://www.ebay.com/itm/USB-Male-to-Female-Charging-Switch-Data-Cable-for-Samsung-Galaxy-Tab-P7500-P7510-/271524739619?">USB Male to Female...</a> 
                        </li> 
                      </ul> 
                    </div> 
                  </div> 
                  <!--3--> 
 
                  <li> 
                    <img width="16" src="index_files/favicon (2).ico"> 
                    <a href="http://www.ebay.com/itm/USB-Male-to-Female-Charging-Switch-Data-Cable-for-Samsung-Galaxy-Tab-P7500-P7510-/271524739619?">USB Male to Female...</a> 
                  </li> 
                </ul> 
              </div> 
            </div> 
          </div> 
          <!--/2--> 
        </ul> 
      </div> 
    </div> 
    <!-- /ТЕСТ --> 
  </div> 
 
</body> 
 
</html>

Answer 1

Если у родителя абсолютно позиционированного элемента значение position задано как fixed, relative или absolute, то отсчет координат ведется от края родительского элемента.

ПОСЛЕДНИЕ ВОПРОСЫ
Все вопросы
Подробнее о сайте web-king.com.ua
ТОП-10
READ ALSO
Как сделать резиновую картинку на одной линии с текстом?
CSS

Как сделать резиновую картинку на одной линии с текстом?

При этом текст не должен не должен обтекать картинку как при использовании float

 266
Как сделать так, что бы элементы дрыгались так же
CSS

Как сделать так, что бы элементы дрыгались так же

Добрый день, подскажите, пожалуйста, как можно сделать так же как на этом сайте (http://enjoymeru/box/), в исходниках смотрел, что они делают это при помощи...

 353
Поле с выпадающим списком select. Изменить цвет текста выделенного option
CSS

Поле с выпадающим списком select. Изменить цвет текста выделенного option

Добрый день, друзья! Имеется поле со списком selectОдин option сделан disabled (так как поле со списком не имеет placeholder) и hidden (чтобы не был виден в списке)

 445
Как создать такие графики
CSS

Как создать такие графики

Мне надо сделать 2 графика для сайтаКакие есть инструменты, чтобы быстро их осуществить

 233