定位(Position)
相关概念
定位组成
使用
一、相关概念
1.1、什么是定位?
定位:将一个元素定在某一个位置(坐标)。
1.2、为什么要使用定位?
定位可以让多个块级元素在一行显示
定位可以让一个元素在某一个盒子内固定在任意位置,且可以覆盖其它元素。
二、定位组成
定位由两个基本元素组成:定位模式(position)和边偏移(top、right、bottom、left),其中定位模式决定了元素在文档中的定位方式,而边偏移则决定了元素的最终位置(坐标)
2.1、定位模式(position)
static:静态定位(默认),即没有定位的意思,元素遵循标准流的摆放特性。且没有边偏移
relative:相对定位
absolute:绝对定位
fixed:固定定位
2.2、边偏移(top、right、bottom、left)
top:顶端偏移量,即元素距离其父元素上边线的距离
left:左侧偏移量, 即元素距离其父元素左边线的距离
bottom:底部偏移量, 即元素距离其父元素下边线的距离
right:右侧偏移量, 即元素距离其父元素右边线的距离
<body>
<hr/>
<div id="div1">第一个盒子</div>
<div id="div2">第二个盒子</div>
</body>
div1{
width:200px;
height: 100px;
background-color: hotpink;
position:relative;
/*相对定位*/
left: 100px;
top: 50px;
}
div2{
width:200px;
height: 100px;
background-color: green;
}
3.2、绝对定位(absolute)
- 元素是相对于其父元素(有定位的父级元素)来移动位置的。(参照点是父元素)
- 如果元素没有父元素或父元素没有定位(position:static),则相对于浏览器来定位。
- 绝对定位不再占有原先标准流中的位置(脱标)
<body>
<hr/><!--会影响红盒子的位置,不会影响绿盒子的位置-->
<div id="outer1">
<div>红盒子</div>
绝对定位会脱离标准流<br/>
不再占有原先标准流中的位置
</div>
<div id="outer2">绿盒子</div>
</body>
outer1{
position:relative;/*相对定位*/
}
outer1>div{
/*红色盒子*/
width:200px;
height: 100px;
background-color: hotpink;
position:absolute;/*绝对定位*/
left:50px;
top:50px;
}
outer2{
/*绿色盒子*/
width:200px;
height: 100px;
background-color: green;
position:absolute;/*绝对定位*/
left:100px;
top:100px;
}
3.3、固定定位(fixed)
- 以浏览器的可视窗口作为参照点移动元素。不受父元素和滚动条的影响
- 固定定位是脱离标准流的,不再占有原先标准流中的位置。
<body> <div>TOP↑</div> <p>固定定位会脱离标准流</p> </body> body>div{ width: 100px; height: 200px; background-color: hotpink; text-align: center; position:fixed;/*固定定位*/ left: 100px; top:100px; }
版权声明:本文为CSDN博主「青叶的全栈之路」的原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/dream_AI/article/details/107143486