CSS学习笔记之position定位

最新推荐文章于 2022-08-18 14:29:22 发布

秋忆夏伤

最新推荐文章于 2022-08-18 14:29:22 发布

阅读量428

点赞数

本文链接：https://blog.csdn.net/qq_29331365/article/details/52473480

版权

position：定义元素布局所用的定位机制。任何元素都可以定位。

定位元素的位置通过 "left", "right", "top", "bottom" 属性进行规定。

position属性常用的值有三个：

1）、relative：相对定位，相对于其在正常流中的默认位置进行定位。且该元素在正常流中的默认位置仍然

存在，不会被别的元素占据。例如：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
    <style type="text/css">
        .div1{
            border:3px solid red;
            width:300px;
            height:200px;
            position:relative;  /* 相对定位 */
            top:60px;
            left:30px;
        }

        #pid{
            border:2px solid blue;
            width:40px;
        }

        #hid{
            border:2px solid #c83dd8;
            width:60px;
        }

        .div2{
            border:3px solid green;
            width:400px;
            height:300px;
            margin-top:20px;
        }
    </style>
</head>
<body>
    <div class="div1">
        我是div1
        <p id="pid">我是段落</p>
        <h2 id="hid">我是标题</h2>
    </div>
    <div class="div2">
        我是div2
    </div>
</body>
</html>

页面效果：虽然div1相对于正常流中的位置发生了偏移，但是其原位置仍然存在，别的元素无法占据。

2）、absolute：绝对定位，相对于其父元素进行定位。若父元素位置移动，该元素会跟着一起移动。

该定位会取消元素在正常流中所占的位置。例如：

<span style="white-space:pre">	</span>.div1{
            border:3px solid red;
            width:300px;
            height:200px;
            position:absolute;  /* 将 relative(相对定位) 改为 absolute(绝对定位) */
            top:60px;
            left:30px;
        }

        #pid{
            border:2px solid blue;
            width:40px;
            position:absolute;  /* 绝对定位，相对于父元素进行定位 */
            left:30px;
            top:20px;
        }

        #hid{
            border:2px solid #c83dd8;
            width:60px;
            position:absolute;  /* 绝对定位，相对于父元素进行定位 */
            left:100px;
            top:60px;
        }

页面效果：div1定位改成absolute之后，div2占据了div1原来的位置。

3）、fixed：绝对定位，相对于浏览器窗口进行定位，使元素固定在浏览器上，不会因为任何情况而发生位置移动。

该定位也会使元素在正常流中的原位置取消。例如：

        .div1{
            border:3px solid red;
            width:300px;
            height:200px;
            position:fixed; /* 将定位 改为 fixed */
            top:60px;       /* 元素距离浏览器窗口的位置不会发生改变。 */
            left:30px;
        }

页面效果：不过其他元素如何改变，也不管浏览器窗口如何改变，div1在浏览器中的位置始终不变。

秋忆夏伤

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS学习笔记之position定位

.div1 { background-color:Red; height:250px; /* 设置div的宽和高 */ width:250px; right:0px; /* 设置div停靠右下角 */ bottom:0px;
复制链接

扫一扫