position属性

最新推荐文章于 2022-03-08 21:01:25 发布

oHayHay

最新推荐文章于 2022-03-08 21:01:25 发布

阅读量538

点赞数

分类专栏： css 文章标签：盒子模型 float+布局 position

本文链接：https://blog.csdn.net/oHayHay/article/details/51901931

版权

css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

//相对定位
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"></meta>
    <title>相对定位</title>
    <style type="text/css">
    body{margin:0; padding: 0}
    .box1{background-color: red;height: 80px;position: relative;top:50px;left: 30px}
    .box2{height: 500px; background-color: yellow; }
    .box3{height: 40px; background-color: blue;}
    </style>
</head>
<body>
<div class="box1">box1</div>
<div class="box2">box2</div>
<div class="box3">box3</div>
</body>
</html>
<!-- 相对定位：以自身初始位置为参照基准进行偏移，相对定位的元素仍处于标准文档流中(对兄弟元素造成影响)，随即拥有偏移属性和z-index属性
 -->

//绝对定位
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"></meta>
    <title>绝对定位</title>
    <style type="text/css">
    body{margin:0; padding: 0}
    .box1{background-color: red;height: 80px;top:50px;left: 30px}
    .box2{height: 200px; background-color: yellow;position: absolute;top: 20px;left: 15px }
    .box{position:relative;height: 300px;background-color:#A907CB}
    .box3{height: 40px; background-color: blue;}
    </style>
</head>
<body>
<div class="box1">box1</div>
<div class="box">
    <div class="box2">box2fvgd</div>
</div>
<div class="box3">box3</div>
</body>
</html>
<!-- 绝对定位：以包含块为基准的定位，完全脱离标准文档流，随即拥有偏移属性和z-index属性 
1、未设置偏移量，无已定位祖先元素，都保持在元素初始位置，脱离标准文档流（对兄弟元素不再造成任何影响,尺寸随内容的宽度）
2、未设置偏移量，有已设置定位的祖先元素，都保持在元素初始位置，脱离标准文档流。
3、设置偏移量，有已定位祖先元素，以离他最近的祖先元素为参照基准。
4、设置偏移量，没有已定位祖先元素，以<html>为偏移参照基准
ps 当一个元素设置绝对定位，没有设置宽度时，元素的宽度根据内容进行调节-->

oHayHay

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
position属性

//相对定位<!DOCTYPE html><html><head> <meta charset="utf-8"></meta> <title>相对定位</title> <style type="text/css"> body{margin:0; padding: 0} .box1{background-color: red;height: 80px;po
复制链接

扫一扫

专栏目录