标签：定位 省略 14 100000000000000000000000000000000000000000000000000000000 color positio
1 相对定位
position: relative
相对定位：相对于自己原来的位置定位
现象和使用：
1.如果对当前元素仅仅设置了相对定位，那么与标准流的盒子什么区别。
2.设置相对定位之后，我们才可以使用四个方向的属性： top、bottom、left、right
用途：
1.微调元素位置
2.做绝对定位的参考（父相子绝）绝对定位会说到此内容。
参考点：
自己原来的位置做参考点。
<style type="text/css">
body{
border: 1px solid orange;
}
div{
width: 200px;
height: 200px;
color: #fff;
}
div.one{
background-color: red;
position: relative;
bottom: -20px;
right: -100px;
}
</style>
<body>
<div class="one">One</div>
</body>
2 绝对定位
position: absolute
特点：
- 脱离标准文档流，不在页面上占位置
- 层级提高，压盖现象
参考点：
单独给一个盒子设置绝对定位，以根元素页面左上角为参考点。
相对于最近的非static祖先元素定位，如果没有非static祖先元素，那么以页面根元素左上角 进行定位。
子绝父相。也就是说当一个儿子标签设置了绝对定位，那么父标签必须是相对定位。（绝对 定位是在相对定位的标签中，找到自己的位置。）
<style type="text/css">
body{
border: 1px solid orange;
}
.grandfather{
position: relative;
top: 20px;
left: 30px;
border: 1px solid purple;
}
.one, .two, .three{
width: 200px;
height: 200px;
color: #fff;
}
div.one{
background-color: red;
position: absolute;
top: 200px;
left: 200px;
}
div.two{
width: 400px;
background-color: green;
/*position: absolute;*/
}
div.three{
background-color: blue;
}
</style>
</head>
<body>
<div class="grandfather">
<div class="one">One</div>
<div class="two">Two</div>
<div class="three">Three</div>
</div>
</body>
3 固定定位
position: fixed
特点：
- 脱离标准文档流
- 设置固定定位后，在页面中滚动网页，固定不变
参考点：
以浏览器的左上角为参考点
应用：
小广告，回到顶部，固定导航栏
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>固定定位</title>
<style type="text/css">
.box{
width: 100px;
height: 100px;
background-color: red;
color: #fff;
}
#one{
position: fixed;
top: 80px;
left: 20px;
}
.outer{
width: 500px;
height: 500px;
/*border: 1px solid green;*/
overflow: scroll;
padding-left: 150px;
}
</style>
<body>
<div class="outer">
<p>
此次省略100000000000000000000000000000000000000000000000000000000此次省略100000000000000000000000000000000000000000000000000000000此次省略100000000000000000000000000000000000000000000000000000000此次省略100000000000000000000000000000000000000000000000000000000此次省略100000000000000000000000000000000000000000000000000000000此次省略100000000000000000000000000000000000000000000000000000000
</p>
<p>此次省略100000000000000000000000000000000000000000000000000000000此次省略100000000000000000000000000000000000000000000000000000000此次省略100000000000000000000000000000000000000000000000000000000此次省略100000000000000000000000000000000000000000000000000000000此次省略100000000000000000000000000000000000000000000000000000000此次省略100000000000000000000000000000000000000000000000000000000此次省略100000000000000000000000000000000000000000000000000000000
</p>
<div class="box" id="one">one</div>
</div>
</body>
</html>
4 浮动和定位对行内元素的影响
不是所有的行内元素都是通过display：block设置宽高。
当行内元素span的标签设置了float浮动属性，那么它就脱离了标准文档流。宽带和高度就可以有效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>浮动和定位给行内元素的影响</title>
<style type="text/css">
span{
float: left;
background-color: red;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<span>我是内行</span>
</body>
</html>
当行内元素span的标签设置了position: absolute绝对定位属性，那么它就脱离了标准文档流。宽带和高度就可以有效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>浮动和定位给行内元素的影响</title>
<style type="text/css">
span{
position: absolute;
background-color: red;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<span>我是内行</span>
</body>
</html>
当行内元素span的标签设置了position: fixed固定定位属性，那么它就脱离了标准文档流。宽带和高度就可以有效果。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>浮动和定位给行内元素的影响</title>
<style type="text/css">
span{
position: fixed;
background-color: red;
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<span>我是内行</span>
</body>
</html>
注：如果给div设置了浮动，那么会有收缩的效果
标签：定位,省略,14,100000000000000000000000000000000000000000000000000000000,color,positio 来源： https://www.cnblogs.com/it-lkp/p/16553584.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。