Div выше позиционирования div с использованием CSS - PullRequest
Новая
       3

Div выше позиционирования div с использованием CSS

0 голосов
/ 04 февраля 2010

У меня есть этот код, который я не совсем понимаю, почему он работает: 

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
        <title>Untitled Document</title>
        <style type="text/css">    
             #divWraper
             {                              
                position: relative;
             }                          
             #divBig
             {      
                width: 500px;
                height: 300px;              
                background: Green;
                border: 1px dashed yellow;              
            }

            #divSmall
            {
            position: absolute;
                bottom: 0;
                left: 0px;
                width: 500px;
                height: 100px;
                background: Red;                              
                z-index: 200;         
                opacity: 0.5;
                filter: alpha(opacity = 50);                    
        }
        </style>

    </head>
    <body> 
      <div id="divWraper">       
        <div id="divBig"></div>    
        <div id="divSmall"></div>       
      </div>
    </body>
</html>

Как, этот стиль заставляет макет "работать" (если я его опускаю, он тормозит макет): 

#divWraper
{                              
     position: relative;
}

Я думал, что это просто для позиционирования внешнего div, но это также влияет на детей ...

Пожалуйста, дайте четкое объяснение:)

Ответы [ 4 ]

4 голосов
/ 04 февраля 2010

Когда вы используете position:absolute для элемента, верхнее, левое, правое и нижнее свойства основаны на ближайшем расположенном родительском элементе или на теле документа, если их нет.

Возьмите следующий пример: 

<div id="parent" style="position:relative">
  <div>blah</div>
  <div id="wrapper">
    <div style="position:absolute">Here is some more content<div>
  </div>
</div>

Позиционированный absolute div здесь будет позиционироваться относительно div с идентификатором parent, потому что это ближайший позиционированный элемент. Если я добавлю style="position:relative" к id="wrapper" div, он будет расположен вместо этого div.

1 голос
/ 04 февраля 2010

Чтобы дочерние элементы div основывали свое позиционирование относительно родительского элемента div, родительский элемент div должен иметь значение, отличное от static (что по умолчанию).Если сделать родителя relative, то все дети, которые не fixed, позиционируют себя относительно родителя.

1 голос
/ 04 февраля 2010

Это на самом деле трюк CSS. Это выглядит так:

Если вы установите родительскую позицию div в относительную, а дочернюю позицию div в абсолютную, тогда дочерние элементы останутся внутри родительского div, даже если их позиция абсолютная. См. Абсолютное позиционирование внутри относительного позиционирования для более подробного объяснения.

Спасибо

0 голосов
/ 04 февраля 2010
Элемент

absolute positioned относится к следующему позиционированному родительскому элементу. Если ни один из родительских элементов не расположен, чем относительно body tag, поэтому, если вы уберете position: relative, div.small будет расположен относительно тела с основанием: 0

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...