前端 | CSS 定位属性position的用法
站长
· 阅读数 8
前端 | CSS 定位属性position的用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS_POSITION</title>
<style type="text/css">
.div1 {
width: 360px;
height: 360px;
border: 1px solid black ;
}
.div1_1 {
width: 180px;
height: 180px;
background-color:burlywood ;
}
.div1_2 {
width: 180px;
height: 180px;
background-color:aquamarine;
}
</style>
</head>
<body>
<div class="div1">
<div class="div1_1">div11</div>
<div class="div1_2">div12</div>
</div>
</body>
</html>
static 静态定位
- 默认的
position值是static
- 忽略
top，right，bottom，left，z-index属性的设置
.div1 {
position: static;
width: 360px;
height: 360px;
border: 1px solid black ;
}
.div1_1 {
width: 180px;
height: 180px;
background-color:burlywood ;
}
.div1_2 {
width: 180px;
height: 180px;
background-color:aquamarine;
}
relative 相对定位
- 相对于元素正常位置（
static）进行的定位
- 可以使用
top、right、bottom、left属性来调整元素的位置
1 relative修改div1
div11与div12的高度和与div1一致，宽度为div1的一半
.div1 {
width: 360px;
height: 360px;
border: 1px solid black ;
position: relative;
top:100px;
}
div1包含div11与div12，由于div1整体高度偏移了，看上去整体偏移了
2 relative修改div11
div1还原，仅修改div11
.div1_1 {
width: 180px;
height: 180px;
background-color: cyan;
position: relative;
left: 180px;
}
- 修改
div12与div11的相对定位一致
3 relative修改div1和div11
.div1 {
width: 360px;
height: 360px;
border: 1px solid black ;
position: relative;
top:100px;
}
.div1_1 {
width: 180px;
height: 180px;
background-color: cyan;
position: relative;
left: 180px;
}
absolute 绝对定位
- 不存在父元素，元素将以浏览器窗口为基准进行定位
- 存在父元素，元素将以父元素为基准进行定位
- 可以使用
top、right、bottom、left属性来调整元素的位置
1 absolute设置div1
.div1 {
width: 360px;
height: 360px;
border: 1px solid black;
position: absolute;
top: 100px;
}
- 与
relative还是不相同的
2 absolute设置div12
.div1_2 {
width: 180px;
height: 180px;
background-color: orange;
position: absolute;
/* left: 180px; */
}
- 先不设置
left值时，与relative是一致的，也就是按照布局展开的
- 由于没有删除
body中margin与padding的宽度，固有以下影响
- 再次将
div12的left设置为180px将出现空隙
- 受到
body { padding: '8px' }与.div1 { border: 1px solid black; }的影响，应该修改为180px + 8px + 1px用以对齐
- 修改
div11与div12的绝对定位一致
3 absolute设置div11
div11初步设置absolute，将使得div12隐藏到div11的下方，通过以下两图说明是隐藏的
.div1_1 {
width: 180px;
height: 180px;
background-color: cyan;
position: absolute;
}
.div1_2 {
width: 200px;
height: 200px;
background-color: orange;
}
- 重置
div12，调整div11
.div1_1 {
width: 180px;
height: 180px;
background-color: cyan;
position: absolute;
left: 189px;
top: 189px;
}
fixed 固定定位
- 以浏览器窗口为基准的定位
- 可以使用
top、right、bottom、left属性来调整元素的位置
1 fixed设置div1
.div1 {
width: 360px;
height: 360px;
border: 1px solid black;
position: fixed;
top: 100px;
}
div1已经超出了body的空间，以浏览器窗口为基准，距离顶部100px
2 fixed设置div11
.div1_1 {
width: 180px;
height: 180px;
background-color: cyan;
position: fixed;
left: 189px;
top: 189px;
}
- 与
absolution不一致，absolution则是相对父元素进行的处理，而fixed是相对浏览器窗口
.div1_1 {
width: 180px;
height: 180px;
background-color: cyan;
position: fixed;
left: 189px;
top: 289px;
}
- 将
top: 289px，发现内容超过div1高度，原因是fixed布局不受body影响，实际高度180px + 100px + 1px
.div1_1 {
width: 180px;
height: 180px;
background-color: cyan;
position: fixed;
left: 189px;
top: 281px;
}
sticky 粘性定位
- 元素在超过特定值前为相对定位（
relative），之后为固定定位（fixed）
- 可以使用
top、right、bottom、left属性来调整元素的位置
1 sticky设置div1
.div1 {
width: 360px;
height: 360px;
border: 1px solid black;
position: sticky;
top: 100px;
left: 206px;
}
- 无论如何调整
top大小没有作用，需要设置body的高度
-
调整
left大小，小于206px是相对定位，大于206px是固定定位。206px是560px - 362px + 8px
left等于206px
left小于206px
left大于206px
2 sticky设置div1.top
body {
height: '400px';
}
.div1 {
width: 360px;
height: 360px;
border: 1px solid black;
position: sticky;
top: 100px;
left: 206px;
}
-
高度配置，需要掌握父元素的高度，超过父元素高度才有用，限制父元素高度为
400pxdiv1元素高度为362px，小于46px=400px - 362px + 8px是相对定位，大于46px是固定定位
top小于46px，是相对定位，
top大于46px
- 由于
div1的父元素是body，也就是浏览器窗体，是不容易判断是相对定位还是固定定位的
3 sticky设置div11.top
div1设置为相对定位，top: 100px
.div1 {
width: 360px;
height: 360px;
border: 1px solid black;
position: relative;
top: 100px;
}
-
按照上述减法计算临界
362px - 1px - 180px + 8px + 100pxdiv1总高度362px，上下边框总共占2px，div11在div1内部，临界值为360px - 180pxdiv1外层还有内容，所以要加上div1 上边框，div1 相对高度，body margin，最终临界值为360px - 180px + 1px + 100px + 8px = 289px
.div1_1 {
width: 180px;
height: 180px px;
background-color: cyan;
position: sticky;
top: 289px;
}
-
top小于289px228px是一个特殊位置，计算公式228px = 408px - 180px
.div1_1 {
width: 180px;
height: 180px;
background-color: cyan;
position: sticky;
top: 228px;
}
top大于289px
