position定位与相对定位

科技前沿 • 2025-03-07 08:25 • 阅读 59

大家好，我是讯享网，很高兴认识大家。

定位：将元素在页面重新排列
1.静态定位：static，文档流定位，流动布局
2.相对定位：relative，元素仍在文档流，只是相对它原来的位置发生偏移
4.绝对定位：absolute，元素脱离文档流，相对于离他最近的，具有定位属性的父亲元素进行定位
4.固定定位：fixed，始终相对于浏览器的窗口进行定位，body/html

相对定位

 <div class="parent"> <div class="box1">1</div> <div class="box2">2</div> <div class="box3">3</div> <div class="box4">4</div> <div class="box5">5</div> </div>

讯享网

css

讯享网

讯享网.box1 { 
    width: 150px; height: 150px; background-color: lightblue; } .box2 { 
    width: 150px; height: 150px; background-color: lightgray; } .box3 { 
    width: 150px; height: 150px; background-color: lightgreen; } .box4 { 
    width: 150px; height: 150px; background-color: lightcoral; } .box5 { 
    width: 150px; height: 150px; background-color: lightseagreen; } /* 相对定位 */ .box1 { 
    position: relative; left: 150px; top: 0; } .box2 { 
    /* 不要移动 */ } .box3 { 
    position: relative; left: 300px; top: -150px; } .box4 { 
    position: relative; left: 150px; top: -300px; } .box5 { 
    position: relative; left: 150px; top: -300px; }

显示在这里插入图片描述
css利用绝对定位

/* 使用绝对定位来实现十字架 */ .parent { 
    /* 设置定位父级的定位属性 */ position: relative; border: 1px dashed gray; width: 450px; height: 450px; } .box1 { 
    width: 150px; height: 150px; background-color: lightblue; } .box2 { 
    width: 150px; height: 150px; background-color: lightgray; } .box3 { 
    width: 150px; height: 150px; background-color: lightgreen; } .box4 { 
    width: 150px; height: 150px; background-color: lightcoral; } .box5 { 
    width: 150px; height: 150px; background-color: lightseagreen; } /* 绝对定位 */ .box1 { 
    position: absolute; left: 150px; } .box2 { 
    position: absolute; top: 150px; } .box3 { 
    position: absolute; left: 150px; top: 150px; } .box4 { 
    position: absolute; left: 300px; top: 150px; } .box5 { 
    position: absolute; left: 150px; top: 300px; }

效果在这里插入图片描述

position定位与相对定位

相关推荐