CSS四种定位方式的详解

最新推荐文章于 2024-05-29 20:35:27 发布

专注Python二十年

最新推荐文章于 2024-05-29 20:35:27 发布

阅读量4.7k

点赞数 5

文章标签： css css3 html 前端大前端

本文链接：https://blog.csdn.net/pig_html/article/details/112391083

版权

CSS布局的四种定位方式1、static（静态定位）：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。参考上篇随笔。2、relative（相对定位）：定位为relative的元素脱离正常的文档流，但其在文档流中的位置依然存在，只是视觉上相对原来的位置有移动。通过top,bottom,left,right的设置相对于其正常（原先本身）位置进行定位。可通过z-index进行层次分级。.static1{ height:8

摘要由CSDN通过智能技术生成

CSS布局的四种定位方式

1、static（静态定位）：

默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。参考上篇随笔。

2、relative（相对定位）：

定位为relative的元素脱离正常的文档流，但其在文档流中的位置依然存在，只是视觉上相对原来的位置有移动。

通过top,bottom,left,right的设置相对于其正常（原先本身）位置进行定位。可通过z-index进行层次分级。

.static1{ 
height:80px; 
background-color: red;
        } 
.relative{ 
height:80px; 
position:relative; 
top:40px; 
left:40px; 
background-color: black;
        } 
.static2{ 
height:80px; 
background-color: blue;
        }

    </style>
</head>
<body>
    <div class="static1"></div>
    <div class="relative"></div>
    <div class="static2"></div>
</body>

他是默认参照父级的原始点为原始点&

最低0.47元/天解锁文章

专注Python二十年

关注

5
点赞
踩
21

收藏

觉得还不错? 一键收藏
0
评论
CSS四种定位方式的详解

CSS布局的四种定位方式1、static（静态定位）：默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。参考上篇随笔。2、relative（相对定位）：定位为relative的元素脱离正常的文档流，但其在文档流中的位置依然存在，只是视觉上相对原来的位置有移动。通过top,bottom,left,right的设置相对于其正常（原先本身）位置进行定位。可通过z-index进行层次分级。.static1{ height:8
复制链接

扫一扫