CSS学习九：定位与层叠

浮动会让出文档流的位置，绝对定位和相对定位不会让出文档流的位置。固定定位会让出文档流的位置，比浮动层更高层，即位于顶层。

一、定位：{position：.....}，结合left，top等定位距离

css定位属性position：允许你对元素进行定位。允许你定义元素框相对于其正常位置应该出现的位置，或者相对于父元素，另一个元素甚至浏览器窗口本身的位置。

position定位，相对于上一个定位元素，不一定是父级元素。

一切皆为框：块框，行内框。

CSS框定位机制：普通流(文档流)、浮动流和绝对定位。

position定位属性的属性值：

• absolute：设置绝对定位的元素，是相对于具有定位属性的父级元素偏移元素的位置，通过left/top/right/bottom属性进行规定。它的父级元素要有相对定位属性relative，或绝对定位属性absolute。
• fixed：生成固定定位的元素，相对于浏览器窗口进行定位。元素的位置通过left，top，right，bottom属性进行规定。
• relative：相对定位的元素，相对于该元素原来位置偏移。因此元素的位置通过left，top，right，bottom属性进行规定。
• static：默认值。没有定位（元素的位置通过left，top，right，bottom属性进行规定）。

 

绝对定位：以父元素为基点，进行定位

使用绝对定位的元素，以它最近的一个具有定位属性的父级元素为基准进行偏移。如果没有任何”具有定位属性“的父级元素，那么会以浏览器窗口为基准进行定位。

绝对定位、相对定位、固定定位的元素从标准文档流中脱离出来，因此它们不会对其它元素的定位造成影响。但可能造成覆盖的影响。

设置绝对定位的两个必要 条件：

• 必须给父级元素（任何一个祖先元素）加定位属性，一般建议加相对定位属性，不定方向属性：position:relative
• 给子元素加绝对定位：position:absolute，同时加上方向属性。

经验：设置了绝对定位，但没有设置偏移的元素将保持在原来的位置。这个性质在网页制作中，可以用于需要使某个元素脱离标准流，而仍然希望它保持在原来的位置的情况。

示例div1相对于div box定位：

        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            #box {
                width: 500px;
                height: 500px;
                background-color: #0000FF;
                position: relative;
            }
            #div1 {
                width: 100px;
                height: 100px;
                background-color: red;
                position: absolute;
                left: 10px;
                top: 50px;
            }
        </style>

        <div id="box">
            <div id="div1">
            </div>
        </div>

 

示例，div2相对于div1定位时，div1是定位元素，则相对于div1定位：

        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            #box {
                width: 500px;
                height: 500px;
                background-color: #0000FF;
                position: relative;
            }
            #div1 {
                width: 100px;
                height: 100px;
                background-color: red;
                position: absolute;
                left: 10px;
                top: 50px;
            }
            #div2 {
                width: 20px;
                height: 20px;
                background-color: yellow;
                position: absolute;
                left: 5px;
                top: 5px;
            }
        </style>

        <div id="box">
            <div id="div1">
                <div id="div2"></div>
            </div>
        </div>

 

示例，div2相对于div1定位时，div1不是定位元素，但div1的父级是定位元素，则最终结果是相对于div1的父级box定位：

        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            #box {
                width: 500px;
                height: 500px;
                background-color: #0000FF;
                position: relative;
            }
            #div1 {
                width: 100px;
                height: 100px;
                background-color: red;
                margin: 10px;
            }
            #div2 {
                width: 20px;
                height: 20px;
                background-color: yellow;
                position: absolute;
                left: 5px;
                top: 5px;
            }
        </style>

        <div id="box">
            <div id="div1">
                <div id="div2"></div>
            </div>
        </div>

 

以上，不论div1，还是div2，都是相对于已有的定位元素进行的绝对定位。

相对定位，是相对于元素自身原来的位置的偏移，而不是相对于其它元素。

相对定位：无论是在标准流中，还是浮动流中，都不会对它的父级元素和相邻元素有任何影响，它只针对自身原来的位置进行偏移。如果与相领位置有冲突，则覆盖相冲突的区域。

示例,box相对于自己原来的位置，进行相对定位。如果设置了left，right，top，bottom，则偏移：

        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            #box {
                width: 500px;
                height: 500px;
                background-color: #0000FF;
                position: relative;
                left: 20px;
            }
        </style>

 

        <div id="box">
        </div>

 

 绝对定位时，如果没有任何祖先元素设置定位，那么此元素的绝对定位是相对应浏览器窗口定位。

 

固定定位定律：

• 元素框的表现类似于将position设置为absolute，不过其包含块是视窗本身。
• 固定定位是相当于”当前窗口“来进行的定位。
• 固定定位元素不再占文档流的空间，层级要高于普通流文档的元素，跟浮动很像。
• 固定定位元素，是一个”块元素“，即行内元素使用fiexed定位，将转成”块元素“。

示例，fixed相对于浏览器窗口固定，常用于移动端。

使屏幕超出上下范围，可以上下滚动：设置height超过屏幕的高度

<div style="width: 10px; height: 1000px;background-color: #800080;"></div>

 

设置div3，相对于浏览窗口固定，不论怎么移动屏幕，它的位置就位于固定位置：

<div id="div3"></div>

 

            #div3 {
                width: 20px;
                height: 20px;
                background-color: darkorchid;
                position: fixed;
                left: 500px;
                bottom: 500px;
            }

 

 

总结浮动流与定位的相同和区别：

浮动流与定位，都脱离了文档流。

浮动流会让出原来的位置，给相邻元素使用。一般会覆盖某些文档流元素。

定位不会让出原来的位置，不会影响相邻元素的位置。可能会覆盖某些文档流元素。

 

二、z-index属性：层叠

z-index属性：设置元素的层叠顺序 ，属性值为无单位的整数值，值较大的元素会叠加在值 较小的元素之上

z-index属性值：整数，默认值为0。

z_index值越大越靠上。

说明：

在position为static时，会忽略z-index声明。没有定位时，z-index层叠是没有意义的。

即z-index，必须和定位一起使用，才有意义。

示例，div1和div4的层叠：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }
            #box {
                width: 500px;
                height: 500px;
                background-color: #0000FF;
                position: relative;
                left: 20px;
            }
            #div1 {
                width: 100px;
                height: 100px;
                background-color: red;
                position: absolute;
                left: 10px;
                top: 20px;        
                z-index: 999;

                }
            #div2 {
                width: 20px;
                height: 20px;
                background-color: yellow;
                position: absolute;
                left: 5px;
                top: 5px;
            }
            #div3 {
                width: 20px;
                height: 20px;
                background-color: darkorchid;
                position: fixed;
                left: 500px;
                bottom: 500px;
            }
            #div4 {
                width: 100px;
                height: 100px;
                background-color: aqua;
                position: absolute;
                left: 30px;
                top: 80px;
                z-index: 100;
            }
        </style>
    </head>
    <body>
        <div id="box">
            <div id="div1">
                <div id="div2"></div>
            </div>
        </div>
        <div style="width: 10px; height: 1000px;background-color: #800080;"></div>
        <div id="div3"></div>
        <div id="div4"></div>
    </body>
</html>

 

 

三、练习

定位练习：

在图片最后一行，添加文字.

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
            #box {
                width: 700px;
                height: 500px;
                margin: 0 auto;
                background-color: antiquewhite;
                position: relative;
            }
            #img {
                width: 700px;
                height: 400px;
                background-image: url(img/timg.jpg);
                position: relative;
            }
            #pp {
                position: absolute;
                left: 0;
                right: 0;
                bottom: 0;
                text-align: center;
            }
        </style>
    </head>
    <body>
        <div id="box">
            <div id="img">
                <p id="pp">汤美女..........</p>
            </div>
            <p>abc...........</p>
            <p>111111..........</p>
        </div>
    </body>
</html>

 

示例，下拉菜单：

示例，跟随菜单：