7 css基础5

最新推荐文章于 2024-07-15 22:52:34 发布

清清1992

最新推荐文章于 2024-07-15 22:52:34 发布

阅读量151

点赞数

分类专栏： html

本文链接：https://blog.csdn.net/weixin_41906828/article/details/80278022

版权

html 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

定位流排版方式

定位方向: left |right | top | bottom

1.1 相对定位

position: relative;

相对定位就是相对于自己以前在标准流中的位置来移动

相对定位注意点：

1、相对定位是不脱离标准流的，会继续在标准流中占用一份空间。

2、在相对定位中同一个方向的定位属性只能使用一个。比如使用了left，就别使用right了。

3、由于相对定位是不脱离标准流的，所以在相对定位中是区分块级元素、行内元素、行内块级元素

4、由于相对定位是不脱离标准流的，并且相对定位的元素会占用标准流中的位置，所以当给相对定位的元素设置margin、 padding 等属性时会影响到标准流的布局。

相对定位应用场景：

1、用于对元素的微调

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

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>相对定位</title>
    <style type="text/css">
        .box1,.box2,.box3{
            width: 200px;
            height: 200px;
        }
        .box1{
            background: red;
        }
        .box2{
            background: blue;
            position: relative;
            left: 20px;
            top: 20px;
            /*影响的是原来的标准流的位置，然后再postion*/
            /*margin-bottom: 20px;*/
            margin-top: 20px;
        }
        .box3{
            background: yellow;
        }
        span{
            height: 100px;
            width: 100px;
            background: pink;
            position: relative;
            left: 20px;
        }
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <span>我是span</span>
</body>
</html>

1.2 绝对定位

position:absolute;

绝对定位就是相对于body来定位，或者相对于其他元素。

绝对定位注意点：

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

2、绝地定位的元素是不区分块级元素、行内元素、行内块级元素

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>绝对定位</title>
    <style type="text/css">
        .box1,.box2,.box3{
            width: 200px;
            height: 200px;
        }
        .box1{
            background: red;
        }
        .box2{
            background: blue;
            position: absolute;
            left: 20px;
            bottom: 20px;

        }
        .box3{
            background: yellow;
        }
        span{
            height: 100px;
            width: 100px;
            background: pink;
            position: absolute;
            right: 20px;
            bottom: 20px;
        }
    </style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<span>我是span</span>
</body>
</html>

绝对定位参考点问题：

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

2、嵌套的盒子，父盒子没有使用定位，子盒子绝对定位，子盒子以body 作为参考点。

3、如果一个绝对定位的元素有祖先元素（不仅仅是父元素），并且祖先元素也是定位流（绝对、相对、固定定位这三个。不包括静态定位），那么这个绝对定位的元素就会以定位流的那个祖先为参考点。

3.1 只要这个绝对定位的元素的祖先都可以，不仅仅是父元素。

3.2 指的定位流是绝地定位、相对定位、固定定位。只有静态定位不行

4、如果一个绝对定位的元素有祖先元素，并且祖先元素也是定位流，而且祖先元素中有多个元素都是定位流，那么这个绝对定位的元素会以离它最近的那个定位流的祖先元素为参考点。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>绝对定位参考点</title>
    <style type="text/css">
       *{
           margin: 0;
           padding: 0;
       }
        .box1{
            width: 250px;
            height: 250px;
            background: red;
            position: relative;
        }
        .box2{
            width: 200px;
            height: 200px;
            background: blue;
            position: relative;

        }
        .box3{
            width: 100px;
            height: 100px;
            background: yellow;
            position: absolute;
            right: 20px;
        }

    </style>
</head>
<body>
<div class="box1">
    <div class="box2">
        <div class="box3"></div>
    </div>
</div>


</body>
</html>

1、如果一个绝对定位的元素是以body作为参考点，那么其实是以网页首屏的宽度和高度作为参考点，而不是以整个网页的宽度和高度作为参考点

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

绝对定位-子绝父相

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>子绝父相</title>
    <style>
        *{
            padding: 0;
            margin: 0;
        }
        ul{
            list-style: none;
        }
        ul li{
            list-style-type: none;
        }
        a{
            color: #000;
            text-decoration: none;
        }
        ul{
            width: 800px;
            height: 50px;
            background: #eee;
            margin: 0 auto;
            margin-top: 50px;



        }


        ul li{
            float: left;
            width: 100px;
            height: 50px;

            text-align:  center;
            line-height: 50px;


        }
        ul li img{
            position: absolute;
            left: 50px;
            top: -5px;
        }
        ul li:nth-of-type(4){
            background: yellow;
            position: relative;
        }

        ul li a{
            display: inline-block;
            width: 100px;
            height: 50px;
        }


        ul li a:hover{
            background: green;
        }

    </style>
</head>
<body>
    <ul>
        <li><a href="#">服装城</a></li>
        <li><a href="#">美妆馆</a></li>
        <li><a href="#">京东超市</a></li>
        <li>
            <a href="#">全球购</a>
            <img src="image/v.jpg">
        </li>
        <li><a href="#">闪购</a></li>
        <li><a href="#">团购</a></li>
        <li><a href="#">拍卖</a></li>
        <li><a href="#">金融</a></li>
    </ul>
</body>
</html>

绝对定位-水平居中

如何让绝对定位的元素水平居中
只需要设置绝对元素的left:50%;
然后再设置绝对定位元素的margin-left:-元素宽度的一半px

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>绝对定位-水平居中</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        div{
            background: red;
            /*width: 50%;*/
            width: 300px;
            height: 50px;
            position: absolute;
            /*margin: 0 auto;*/
            left: 50%;
            margin-left: -150px;

        }

    </style>
</head>
<body>
<!--

如何让绝对定位的元素水平居中
   只需要设置绝对元素的left:50%;
    然后再设置绝对定位元素的margin-left:-元素宽度的一半px
-->
    <div></div>
</body>
</html>

1.3 固定定位

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

背景定位可以让背景图片不随着滚动条的滚动而滚动。

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

固定定位注意点：

1、固定定位的元素是脱离标准流的，不会占用标准流的空间
2、固定定位和绝对定位一样，不区分行内、块级，行内块

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>固定定位</title>
    <style type="text/css">
        *{
            padding: 0;
            margin: 0;
        }
        /*div{*/
            /*width: 200px;*/
            /*height: 2000px;*/
            /*border: 1px solid #000000;*/
            /*background-image: url("image/zjl.jpg");*/
            /*background-repeat: no-repeat;*/
            /*background-attachment: fixed;*/
            /*background: url("image/zjl.jpg") no-repeat scroll;*/
        /*}*/


        .box1{
            width: 100px;
            height: 100px;
            background: red;
        }
        .box2{
            width: 100px;
            height: 100px;
            background: green;
            position: fixed;


        }
        .box3{
            width: 150px;
            height: 150px;
            background: blue;
        }
        /*span{*/
            /*background: pink;*/
            /*width: 100px;*/
            /*height: 100px;*/
            /*position: fixed;*/
        /*}*/

        .box4{
            width: 100px;
            height: 2000px;
            background: yellow;
        }
    </style>
</head>
<body>
    <!--<div></div>-->


    <div class="box1"></div>
    <div class="box2"></div>
    <div class="box3"></div>
    <!--<span></span>-->
    <div class="box4"></div>
</body>
</html>

1.4 静态定位

◆position:static; 静态定位。默认值，就是文档流。

补充：

z-index属性

1、什么是z-index属性？

默认情况下所有的元素都有一个默认的z-index属性，取值是0；z-index属性的作用是专门用于控制定位元素的覆盖关系的。

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

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

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

注意点：

1、从父现场

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

1.2 如果两个元素的父元素设置了z-index属性，那么子元素的z-index属性就会失效，也就是说谁的父元素的z-index属性比较大谁就会显示在上面。

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>z-index2</title>
    <style>
        .father{
            width: 100px;
            height: 100px;
            background: red;
            position: relative;
            z-index: 1;
        }
        .father2{
            width: 100px;
            height: 100px;
            background: green;
            position: relative;
            z-index: 2;
        }
        .son{
            width: 50px;
            height: 50px;
            background: blue;
            position: absolute;
            left: 100px;
            top: 150px;
            z-index: 2;
        }
        .son2{
            width: 50px;
            height: 50px;
            background: yellow;
            position: absolute;
            /*left: 80px;*/
            /*top: 80px;*/
            left: 80px;
            top: 80px;
            z-index: 1;
        }
    </style>
</head>
<body>
    <div class="father">
        <div class="son"></div>
    </div>

    <div class="father2">
        <div class="son2"></div>
    </div>
</body>
</html>