html---定位position（固定，相对（relative），绝对（absolute））

合集下载

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

html---定位position（固定，相对（relative），绝对（absolute））
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- position
属性值：
相对定位(relative)
left right top bottom
1.使⽤相对定位后，不会脱离⽂档流。

也就不会影响其他元素的位置
2.只是⽤相对定位，不使⽤以下left等四个值是不会进⾏偏移的
如何使⽤相对定位：如
position:relative;
left:100px;
top:100px;
绝对定位(absolute)
1.使⽤绝对定位后，脱离⽂档流
2.使内联元素⽀持宽⾼，如span
3.使块元素的宽度跟随内容决定（让块标签具有内联的⼀些特性）
4.⽗元素没有定位元素，⽽⼦元素有定位元素，那么⼦元素的偏移是按照整个⽂档流进⾏的，⽽不是按照盒⼦进⾏的，给⽗元素设置定位后，则解决这个问题（固定定位，相对定位，绝对定位） -->
<style>
#Position_01{
width: 100px;
height: 100px;
background-color: #0000FF;
}
#Position_02{
width: 100px;
height: 100px;
background-color: red;
position: relative;/* 相对定位 */
left: 100px;
top: 100px;
}
#Position_03{
width: 100px;
height: 100px;
background-color: #000000;
color: #FF0000;
position: absolute;
}
#Positon_04{
width: 200px;
height: 200px;
border: 2px solid #0000FF;
position: relative;
}
#Position_05{
width: 100px;
height: 100px;
background-color: #000000;
/* position: absolute; *//* 脱离⽂档流，下⾯盒⼦上来 */
}
#Position_06{
background-color: #FB8303;
position: absolute;该盒⼦不设置宽⾼，设置绝对定位后，使块元素具有内联作⽤（宽度根据内容决定）
}
span{
width: 100px;
height: 100px;
background-color: #0000FF;
position: absolute;/* 内联标签占宽⾼ */
bottom: 150px;
}
#Position_07{
width: 100px;
height: 100px;
background-color: antiquewhite;
position: absolute;
left: 100px;
top: 100px;
}
</style>
</head>
<body>

<div id="Positon_04">
<div id="Position_05">2</div>
<div id="Position_06">3</div>
<div id="Position_07">4</div>
</div>
<span>111</span>
</body>
</html>。