<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* CSS书写:1.定位/浮动/display;2.盒子模型;3.文字属性 */
.box{
/* 只加position盒子位置不变 */
/* left和right都有,以left为准;top和bottom都有,以top为准 */
/* 静态定位,默认值,标准流,盒子不变位置 */
/* position: static;
left: 100px;
top: 200px; */
/* 相对定位 不脱标 */
/* 特点
1.占有原来的位置
2.仍然具有标签原有的显示模式
3.改变位置参照自己原来的位置 */
position: relative;
left: 100px;
top: 100px;
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<!-- 相对定位:自恋型定位,相对于自己之前的位置进行移动 -->
<!-- position:relative -->
<!-- 特点:需要配合方位属性实现移动
相对于自己原来的位置移动
在页面中占位置,没有脱标 -->
<!-- 应用场景:配合绝对定位组CP(子绝父相);用于小范围移动 -->
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<div class="box">p</div>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box{
/* 绝对定位:
先找已经定位的父级,如果有这样的父级,就以这个父级为参照物进行定位
有父级,但父级没有定位,以浏览器窗口为参照进行定位 */
/* 没有父级 */
position: absolute;
/* left: 50px; */
left: 0;
top: 0;
/* 特点
1.脱标,不占位
2.改变标签的显示模式特点:具备行内块的特点(在一行共存,宽高生效) */
width: 200px;
height: 200px;
background-color: pink;
}
</style>
</head>
<body>
<!-- 绝对定位 -->
<!-- 拼爹型定位,相对于非静态定位的父元素进行定位移动 -->
<!-- position:absolute; -->
<!-- 特点
1.需要配合方位属性实现移动
2.默认相对于浏览器可视区域进行移动
3.在页面中不占位置--已经脱标 -->
<!-- 应用场景:配合绝对定位组CP(子绝父相) -->
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<div class="box">p</div>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
<p>测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位测试定位</p>
</body>
</html>
这篇文章详细介绍了CSS中的定位技术，包括静态定位、相对定位和绝对定位的概念及特点。相对定位保持元素在标准流中的位置并允许微调，而绝对定位则脱离标准流，依据最近已定位父元素或浏览器窗口定位。示例代码展示了这些定位方式如何影响元素的布局。
扫一扫
1126
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
