CSS Position(定位)

在CSS中,Position 属性经常会用到,主要是绝对定位和相对定位,简单的使用都没有问题,尤其嵌套起来,就会有些混乱。

Position 属性:规定元素的定位类型。即元素脱离文档流的布局,在页面的任意位置显示。

position 属性值:

absolute:生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

relative:生成相对定位的元素,相对于其正常位置进行定位。因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。

fixed:生成绝对定位的元素,相对于浏览器窗口进行定位。

static:默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规                定。

inherit:规定应该从父元素继承 position 属性的值。

我们最常用的的就是 absolute 和 relative 两种方式。

position 辅助属性:

①left : 表示向元素的左边插入多少像素,使元素向右移动多少像素。

②right :表示向元素的右边插入多少像素,使元素向左移动多少像素。

③top :表示向元素的上方插入多少像素,使元素向下移动多少像素。

④bottom :表示向元素的下方插入多少像素,使元素向上移动多少像素。

上面属性的值可以为负,单位:px 。


Absolute 绝对定位

绝对定位;脱离文档流的布局,遗留下来的空间由后面的元素填充。定位的起始位置为最近的父元素(postion不为static),否则为Body文档本身。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>实例</title> 
  <style type="text/css">
        html body
        {
            margin: 0px;
            padding: 0px;
        }
        #parent
        {
            width: 200px;
            height: 200px;
            border: solid 5px black;
            padding: 0px;
            position: relative;
            background-color: green;
            top: 15px;
            left: 15px;
        }
        #sub1
        {
            width: 100px;
            height: 100px;
            background-color: blue;
            position: absolute;
            top: 15px;
            left: 15px;
        }
        #sub2
        {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="parent">
        <div id="sub1">
        </div>
        <div id="sub2">
        </div>
    </div>
</body>
</html>

注意:我们发现,由于我们对Sub1进行了绝对定位,Sub1的位置发生了偏移,而同级Div Sub2,则占据了Sub1的位置,并且Sub1遮挡了Sub2.

Relative 相对定位

相对定位;不脱离文档流的布局,只改变自身的位置,在文档流原先的位置遗留空白区域。定位的起始位置为此元素原先在文档流的位置。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>实例</title> 
  <style type="text/css">
        html body
        {
            margin: 0px;
            padding: 0px;
        }
        #parent
        {
            width: 200px;
            height: 200px;
            border: solid 5px black;
            padding: 0px;
            position: relative;
            background-color: green;
            top: 15px;
            left: 15px;
        }
        #sub1
        {
             width: 100px;
             height: 100px;
             background-color: blue;
             position: relative;
             top: 15px;
             left: 15px;
        }
        #sub2
        {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div id="parent">
        <div id="sub1">
        </div>
        <div id="sub2">
        </div>
    </div>
</body>
</html>

 注意:我们会发现Sub1进行了偏移,并不影响Sub2的位置,同时遮盖住了Sub2,切记偏移并不是相对于 Div Parent的,而是相对于Sub1 原有的位置。

Fixed 定位

固定定位;类似于absolute,但不随着滚动条的移动而改变位置。

<meta charset="utf-8"> 
<title>实例</title> 
  <style type="text/css">
        html body
        {
            margin: 0px;
            padding: 0px;
        }
        #parent
        {
            width: 200px;
            height: 200px;
            border: solid 5px black;
            padding: 0px;
            position: relative;
            background-color: green;
            top: 15px;
            left: 15px;
        }
        #sub1
{
  width: 100px;
  height: 100px;
  background-color: blue;
  position: absolute;
  top: 15px;
  left: 15px;
}
#sub2
{
  width: 100px;
  height: 100px;
  background-color: red;    
  position: fixed;
  top: 5px;
  left: 5px;              
}
    </style>
</head>
<body>
    <div id="parent">
        <div id="sub1">
        </div>
        <div id="sub2">
        </div>
    </div>
</body>
</html>

注意: 会发现Sub2 始终以body 进行定位。


Weiter lernen
||
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>实例</title> <style type="text/css"> div { height: 200px; width: 300px; border-color: Black; border-style: solid; border-width: 1px; } #a { position:absolute; left:900px; top:150px; } #b { position:relative; left:500px; top:100px; } #c { position:fixed; left:970px; top:400px; } #d { position:static; background-color:Window; } </style> </head> <body>   <div id="a" >     div-a<br />     position:absolute;<br />     绝对定位;脱离文档流,遗留空间由后续元素填充。   </div>   <div id="b" >     div-b<br />     position:relative;<br />     相对定位;不脱离文档流,只改变自身的位置,在文档流原先的位置遗留空白区域。   </div>   <div id="c" >     div-c<br />     position:fixed;<br />     固定定位;固定在页面中,不随浏览器的大小改变而改变位置。   </div>   <div id="d"></div>   <br><br><br><br><br><br><br><br><br><br> </body> </html>
einreichenCode zurücksetzen