定位流
定位流分类
1.相对定位position:relative
- 1️⃣不会脱离标准流，会占用标准流的空间
- 2️⃣要结合top left right bottom属性使用，会相对于以前在标准流的位置而移动
- 注意点
- ①相对定位同一个方向上的属性只能使用一个：例如不能同时left和right
- ②相对定位是不脱离标准流的，会继续在标准流中占用一份空间
- ③相对定位区分块级、行内、行内块级元素
- ④相对定位设置margin、padding等熟悉会设置给定位前的元素而不是相对定位后的元素---会影响到标准流的布局
- 应用场景
- a.微调元素 --- 用得少
- b.配合绝对定位使用
2.绝对定位position:absolute
- 相对于body来定位
- 注意点
- 1️⃣绝对定位是脱离标准流---类似于浮动
- 2️⃣绝对定位是不区分行内、块级、行内块级，都可以设置宽高
- 3️⃣绝对定位要结合top left right bottom属性使用
- 绝对定位参考点如何选择？
- 1️⃣默认情况下所有元素（无论是否有祖先元素），都会以body为参考点
- 2️⃣若绝对定位元素有祖先元素，则参考点就是祖先元素，祖先元素也要是定位流（相对，绝对，固定，除了静态定位）才能变更绝对定位参考点
- 3️⃣只要是祖先元素都可以更改参考点
- 4️⃣一个绝对定位元素有祖先元素且祖先元素中有多个定位流，这个绝对定位会选择最近的那个定位流的祖先元素为参考点 -- 就近原则
- 面试注意点
- 1️⃣若绝对定位元素以body为参考点的话，只会以屏幕未滚动的页面的宽度和高度作为参考点，而不是以整个网页的高度和高度为参考点
- 2️⃣绝对定位元素会忽略祖先元素的padding
- 应用场景
- 1️⃣微调元素
- 2️⃣一般都是绝对定位和相对定位搭配使用（子绝父相）--- 导航条
子绝父相
-
1️⃣只用相对定位时，元素移动前的位置还是会存在，占用标准流的空间----不能单独使用相对定位
-
2️⃣只使用绝对定位，显示的永远是首次出现的宽高，网页宽度和高度变化时会错位----不能单独使用绝对定位
-
诀窍：子绝父相，无论网页宽度高度如何变化都不会变形
-
绝对定位的水平居中
- margin：0 autuo 在绝对定位中失效
- 设置高度宽度时可以设置百分比
- 只需要设置绝对定位元素left：50%然后再设置绝对定位元素的margin-left:-元素宽度的一半
-
练习1：团购界面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模仿团购盒子</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 300px;
height: 300px;
border: 2px solid #ccc;
margin: 0 auto;
margin-top: 100px;
position: relative;
}
div img{
width: 300px;
height: 200px;
}
div .hot{
width: 45px;
height: 44px;
background: url("images/tuangou.png") 0 -280px no-repeat;
display: inline-block;
position: absolute;
top: 0;
left: 0;
}
div .price{
width: 134px;
height: 42px;
background: url("images/tuangou.png") 0 -362px no-repeat;
display: inline-block;
position: absolute;
top: 163px;
left: -7px;
}
</style>
</head>
<body>
<div>
<span class="hot"></span>
<span class="price"></span>
<p>滏山汇海鲜火锅自助餐仅售54.9元！价值79元的周一至周五午餐券，提供免费WiFi。</p>
</div>
</body>
</html>
- 练习2：焦点图---广告轮播
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>焦点图</title>
<style>
*{
margin: 0;
padding: 0;
}
div{
width: 520px;
height: 280px;
border: 1px solid khaki;
margin: 0 auto;
margin-top: 100px;
position: relative;
}
div .leftArrow{
position: absolute;
left: 0px;
top: 100px;
}
div .rightArrow{
position: absolute;
right: 0px;
top: 100px;
}
span{
width: 40px;
/*height: 80px;*/
margin-top: 10px;
/*黑色透明*/
background-color: rgba(0,0,0,0.3);
display: block;
font-size: 50px;
font-weight:normal;
color: white;
text-align: center;
line-height: 80px;
}
ol{
list-style: none;
width: 200px;
height: 40px;
background-color: rgba(255,255,255,0.7);
position: absolute;
right: 10px;
bottom: 10px;
}
ol li{
float: left;
width: 40px;
/*height: 40px;*/
line-height: 39px;
text-align: center;
border: 1px solid khaki;
border-right: none;
box-sizing: border-box;
}
ol li:nth-of-type(5){
border-right: 1px solid khaki;
}
</style>
</head>
<body>
<div>
<span class="leftArrow"><</span>
<span class="rightArrow">></span>
<ol>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ol>
</div>
</body>
</html>
3.固定定位
- 1️⃣固定定位是脱离标准流的，不会占用标准流中的空间
- 2️⃣和绝对定位一样，不会区分行内、块级、行内块级元素
- 3️⃣固定定位可以让某个元素不随着滚动条滚动而滚动
- 注意：背景定位可以让背景图片不随着滚动条而滚动
- 应用场景
- 1️⃣导航条
- 2️⃣广告
- 3️⃣返回顶部--a标签href属性是#就可以返回顶部
- 注意点
- 1️⃣IE6不支持固定定位
4.静态定位
- 默认情况下，标签就是静态定位
z-index属性
- 默认情况下，所有元素都有一个默认的z-index属性，取值为0
- 作用：专门用于控制定位流元素的覆盖关系
- 关于覆盖关系
- 1️⃣默认情况定位流元素默认会盖住标准流元素
- 2️⃣后面编写的定位流元素会盖住前面的定位流元素
- 3️⃣若定位流元素设置了z-index属性，那么该值越大的，就显示在最上面
- 注意点
- ①若两个元素的父元素都没有设置z-index属性，那么谁的z-index属性比较大，谁就显示在上面
- ②若两个元素的父元素都设置了z-index属性，谁的父元素的z-index比较大，谁就显示在上面
- ③父元素z-index大的听大的，哪怕子元素z-index比另一个子元素小，那也得听子元素的父元素z-index较大的一个
网友评论