定位流

1.定位流分类

1.1相对定位

1.2绝对定位

1.3固定定位

1.4静态定位（默认情况下元素就是静态定位）

相对定位

2.什么是相对定位？

相对于自己在原来标准流中的位置进行移动

格式：

position: relative;

top: 20px;

扫描二维码关注公众号，回复： 4853120 查看本文章

left: 20px;

3.相对定位注意点

3.1相对定位是不脱离标准流的，会继续在标准流中占有一部分空间

3.2在相对定位中同一个方向上的定位属性只能使用一个

3.3由于我们的相对路径是不脱离标准流的，所以在相对定位中是区分块级元素/行内元素/行内块级元素的

3.4由于相对定位是不脱离标准流的，所以相对定位的元素会占用标准流中的位置，

所以当给相对定位的元素设置margin/padding等属性的时候会影响到标准流的布局。

4.相对定位的应用场景

4.1用于对元素进行微调

4.2配合后面学习的绝对定位来使用

绝对定位

1.什么是绝对定位？

绝对定位就是相对于body来定位的

2.绝对定位的注意点

2.1绝对定位的元素是脱离标准流的

2.2绝对定位的元素是不区分块级元素和行内元素/行内块级元素的

3.绝对定位参考点

规律

1.默认情况下所有的绝对定位的元素，无论有没有祖先元，都会以body作为参考点

2.如果一个绝对定位的元素有祖先元素，并且祖先元素也是定位流，

那么这个绝对定位的元素就会以定位流那个祖先元素作为参考点

2.1只要是这个绝对定位元素的祖先元素都可以

2.2这里的定位流指绝对定位/相对定位/固定定位

2.3定位流中只有静态定位不行

3.如果一个绝对定位的元素有祖先元素，并且祖先元素也是定位流，

而且祖先元素中有多个元素都是定位流，

那么这个绝对定位的元素会以离它最近的那个定位流的祖先元素为参考点

4.绝对定位注意点

1.如果一个绝对定位的元素是以body作为参考点，

那么其实是以网页首屏的宽度和高度作为参考点，

而不是整个网页的宽度和高度作为参考点

2.一个绝对定位的元素会忽略祖先元素的padding

绝对定位-子绝父相

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绝对定位-子绝父相</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        ul{
            list-style: none;
            width: 800px;
            height: 50px;
            margin: 0 auto;
            margin-top: 100px;
            background-color: #cccccc;
        }
        ul li{
            float: left;
            width: 100px;
            line-height: 50px;
            text-align: center;
        }
        ul li:nth-of-type(4){
            background-color: rgba(255, 255, 255, 0.67);
            /*方法三子绝父相*/
            position: relative;
        }
        ul li img{
            width: 47px;
            /*方法一：只使用相对定位*/
            /*弊端：*/
            /*相对定位不会脱离标准流，会继续在标准流中占用一份空间，*/
            /*所以不利于布局界面*/
            /*position: relative;*/
            /*right: 30px;*/
            /*bottom: 15px;*/

            /*方法二：只使用绝对定位*/
            /*弊端：*/
            /*默认情况下绝对定位的元素会以body作为参考点，*/
            /*所以会随着浏览器的宽度和高度的变化而变化*/
            /*position: absolute;*/
            /*left: 620px;*/
            /*top: 89px;*/

            /*方法三：子绝父相*/
            /*子元素用绝对定位，父元素用相对定位*/
            position: absolute;
            /*left: 31px;*/
            top: -15px;

            /*方法三：子绝父相的加强版*/
            /*绝对定位元素恒定水平居中，不受父元素宽高的影响,注：23.5px为图片宽度的一半*/
            left: 50%;
            margin-left: -23.7px;
        }
    </style>
</head>
<body>

<ul>
    <li>服装城</li>
    <li>美妆馆</li>
    <li>京东超市</li>
    <li>全球购
        <img src="../images/hot.png" alt="">
    </li>
    <li>闪购</li>
    <li>团购</li>
    <li>拍卖</li>
    <li>金融</li>
</ul>
</body>
</html>

固定定位

1.什么是固定定位？

固定定位和前面学习的背景关联方式很像

背景关联可以让背景图片不随滚动条的滚动而滚动

而固定定位可以让某个盒子不随滚动条的滚动而滚动

注意点：

1.固定定位的元素时脱离标准流的，不会占用标准流的空间的

2.固定定位和绝对定位一样，不区分行内/块级/行内块级元素

3.ie6浏览器不支持固定定位

z-sizing属性

1.什么是z-index属性？

默认情况下所有的元素都有一个默认的z-index属性取值是0.

z-index属性的作用是专门用于控制定位流元素的覆盖关系的

1.默认情况下定位流的元素会覆盖住标准流的元素

2.默认情况下定位流元素后面编写的元素会盖住前面编写的

3.如果定位流的元素设置了z-index属性，那么谁的z-inde属性比较大，谁就显示在上面

注意点：

1.从父现象

1.1如果两个元素的父元素都没有设置z-index属性，那么谁的z-index属性大谁就显示在上面

1.2如果两个元素的父元素设置了z-index属性，那么子元素的z-index属性就会失效，

也就是说谁的z-index属性比较大谁就会显示在上面

HTML5前端开发入门之CSS定位流

定位流

相对定位

绝对定位

绝对定位-子绝父相

固定定位

z-sizing属性

猜你喜欢