CSS元素显示的层次&浮动、清除浮动&定位、固定定位、相对定位、绝对定位&定位层次z-index

最新推荐文章于 2024-07-25 09:25:29 发布

执键书生

最新推荐文章于 2024-07-25 09:25:29 发布

阅读量642

点赞数 3

文章标签： html css css3

本文链接：https://blog.csdn.net/weixin_44761231/article/details/118769572

版权

1、元素显示的层次：

在这里插入图片描述

2、浮动

Ⅰ、浮动：

float：left|right；

元素脱离文档流层，向上进入浮动层；然后水平向左或者向右平移，直到遇到其他浮动元素或者父边框停止。
向上进入浮动层后，原来的位置空缺由文档流层的其它元素补齐。

Ⅱ、清除浮动：

clear：left|right|both；

文档流层里的元素不想和浮动层的元素在同一行，如果这个文档流层的元素左边|右边|两边有浮动元素，则这个文档流层的元素在下一行显示。

<style>
    html {
        background-color: gray;
    }
    div {
        width: 120px;
        height: 120px;
    }
    #d1 {
        background-color: red;
    }
    #d2 {
        background-color: green;
        float: left;
    }
    #d3 {
        background-color: blue;
        float: left;
    }
    #d4 {
        background-color: pink;
        float: left;
    }
    #d5 {
        background-color: indigo;
        float: right;
    }
    #d6 {
        background-color: lightseagreen;
        clear: both;
    }
</style>

<body>
    <div id="d1">111</div>
    <div id="d2">222</div>
    <div id="d3">333</div>
    <div id="d4">444</div>
    <div id="d5">555</div>
    <div id="d6">666</div>
</body>

在这里插入图片描述

3、定位

确定一个元素的位置，该元素脱离文件流层，进入定位层。

Ⅰ、固定定位：

position：fixed；

参照浏览器的4条窗口边框进行偏移。

top|right|bottom|left：px；（值为负反方向偏移）

<style>
    html {
        height: 1200px;
        background-color: gray;
    }
    div {
        width: 120px;
        height: 120px;
    }
    #d1 {
        background-color: red;
        position: fixed;
        right: 10px;
        bottom: 10px;
    }
    #d2 {
        background-color: green;
    }
    #d3 {
        background-color: blue;
    }
    #d4 {
        background-color: pink;
    }
    #d5 {
        background-color: indigo;
    }
    #d6 {
        background-color: lightseagreen;
    }
</style>

<body>
    <div id="d1">111</div>
    <div id="d2">222</div>
    <div id="d3">333</div>
    <div id="d4">444</div>
    <div id="d5">555</div>
    <div id="d6">666</div>
</body>

在这里插入图片描述

Ⅱ、相对定位：

唯一一个在文档流层中自己原来的位置保留，不会被其它元素补位，其它定位都会被补位。

position：relative；

参照原来在文档流层中自己的4条窗口边框进行偏移。

top|right|bottom|left：px；（值为负反方向偏移）

<style>
    html {
        height: 1200px;
        background-color: gray;
    }
    div {
        width: 120px;
        height: 120px;
    }
    #d1 {
        background-color: red;
        position: relative;
        left: 30px;
        top: 30px;
    }
    #d2 {
        background-color: green;
    }
    #d3 {
        background-color: blue;
        position: relative;
        left: 30px;
        top: 30px;
    }
    #d4 {
        background-color: pink;
    }
</style>

<body>
    <div id="d1">111</div>
    <div id="d2">222</div>
    <div id="d3">333</div>
    <div id="d4">444</div>
</body>

在这里插入图片描述

Ⅲ、绝对定位：

position：absolute；

参照最近的采用了定位的祖先元素的4条窗口边框进行偏移。

top|right|bottom|left：px；（值为负反方向偏移）

<style>
    html {
        background-color: lightsteelblue;
    }
    #p1 {
        background-color: lightyellow;
        width: 500px;
        height: 300px;
        margin: 0 auto;
   /* 父元素要使用定位，子元素才能相对于父元素绝对定位 */
        position: relative;
    }
    #c2 {
        background-color: rgba(100, 2, 100, 0.6);
        width: 200px;
        height: 150px;
   /* 相对于父元素p1绝对定位 */
        position: absolute;
        top: 30px;
        left: 30px;
    }

</style>

<div id="p1">
    <div id="c1"> 
        <img src="images/111.png"/>
    </div>
    <div id="c2">

    </div>
</div>

在这里插入图片描述

4、定位层次

只能用于定位层的元素！！！

z-index：整数；

z-index>=0：在定位层的高层；

z-index<0：在文档流层的下层。

<style>
    html {
        height: 1200px;
        background-color: gray;
    }
    div {
        width: 120px;
        height: 120px;
    }
    #d1 {
        background-color: red;
        position: relative;
        top: 30px;
        left: 30px;
        z-index: -10;
    }
    #d2 {
        background-color: green;
    }
    #d3 {
        background-color: blue;
        position: fixed;
        top: 150px;
        left: 30px;
        /* 不加z-index默认HTML元素在后面的在上面 */
        z-index: 10;
    }
    #d4 {
        background-color: pink;
        position: fixed;
        top: 200px;
        left: 40px;
    }
</style>

<body>
    <div id="d1">111</div>
    <div id="d2">222</div>
    <div id="d3">333</div>
    <div id="d4">444</div>
</body>

在这里插入图片描述

执键书生

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
CSS元素显示的层次&浮动、清除浮动&定位、固定定位、相对定位、绝对定位&定位层次z-index

1、元素显示的层次：2、浮动Ⅰ、浮动： float：left|right；元素脱离文档流层，向上进入浮动层；然后水平向左或者向右平移，直到遇到其他浮动元素或者父边框停止。向上进入浮动层后，原来的位置空缺由文档流层的其它元素补齐。Ⅱ、清除浮动： clear：left|right|both；文档流层里的元素不想和浮动层的元素在同一行，如果这个文档流层的元素左边|右边|两边有浮动元素，则这个文档流层的元素在下一行显示。<style> html {
复制链接

扫一扫