3.6div标签与盒子模型
描述：针对特定标签的定位(可以对body以内所有的标签)
1.定位的分类
绝对定位：absolute 和 fixed 统称为绝对定位
相对定位：relative
默认值：static
2.定位属性名称 position（位置）
四个值: static relative absolute fixed
3.在发开当中，发现对于块级元素/行级元素，都能够个占一行，但是我想让他们进行移动，显示部分覆盖的效果！
4.技术： 定位
5.相对定位
5.1 含义： 根据自身的位置，进行小范围的移动
5.2 一般情况下，一个标签都会有一个明确的父标签，反之，如果没有则把整个网页当作是父标签
5.3 相对定位的应用
position: relative
四个方向： top right bottom left
6.绝对定位
6.1 含义：根据特定的位置为基准(一般是以父标签为基准)，来对顶的进行位置移动！
6.2 绝对定位的应用
position: absolute;
四个方向： top right bottom left
7.相对于浏览器定位
7.1 属于决定定位的范畴
7.2应用场景：
网页当中的小广告框或者网站当中的菜单栏
7.3应用格式
positon:fixed;
四个方向： top right bottom left
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>定位position</title>
<style type="text/css">
#div1{
width: 500px;
height: 200px;
background: green;
/*margin-top: 100px;
margin-left: 100px;*/
position: relative;
top: 20px;
left: 20px;
}
#div3{
width: 200px;
height: 100px;
background:blue ;
position: relative;
top: 20px;
left: 30px;
}
#div2{
width: 500px;
height: 200px;
background: black;
position: absolute;
top: 100px;
left: 100px;
}
#div4{
width: 200px;
height: 100px;
background:yellow ;
position: absolute;
top: 20px;
left: 30px;
}
#div5{
width: 50px;
height: 200px;
background: deeppink;
position: fixed;
left: 1250px;
top: 100px;
}
</style>
</head>
<body>
<div id="div1">
<!--嵌套一个子标签 div-->
<div id="div3">
</div>
</div>
<div id="div2">
<div id="div4">
</div>
</div>
<hr />
<div id="div5">
</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</body>
</html>
2139
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
