Question

我有这个代码，我真的不明白它为什么会起作用：

<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，但它也会影响孩子......

请提供明确的解释：）

Answer 1

在元素上使用position:absolute时，top，left，right和bottom属性基于最近的父元素，如果没有，则为文档正文。

采用以下示例：

<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将相对于具有parent id的div定位，因为这是最近的定位元素。如果我将style="position:relative"添加到id="wrapper" div，则会相对于该div进行定位。

Answer 2

这实际上是一个css技巧。它是这样的：

如果将父div位置设置为relative而子div将位置设置为absolute，则子div将保留在父div内，即使它们的位置是绝对的。

有关详细说明，请参阅：Absolute Positioning Inside Relative Positioning。

由于

Answer 3

对于子div，它们相对于父div的定位，父div必须将定位设置为静态以外的东西（默认情况下）。制作父relative会使所有不fixed的孩子相对于父母定位。

Answer 4

absolute positioned元素相对于下一个定位的父元素。如果父元素的位置都不是body tag的相对位置，那么如果取出position: relative，div.small相对于底部位于底部：0

使用CSS在div上方划分div

4 个答案: