CSS中的position定位
2018-09-25 本文已影响5人
六个周
1.HTML中的三种布局方式
- 标准流
- 浮动
- 定位
2.HTML中的两大元素
- 块级元素
div、H1~H6、table、ul li ol、p、- 内联元素
span、img、a、input、
3.position属性的意义
- position属性决定了元素将如何定位
- 通过top、right、bottom、left实现位置
position中的可选参数
staticrelative----- 相对定位absolute----- 绝对定位、脱离文档流,起作用必须与left、top一起使用（注：相对于窗口定位，设置body高度没有用）
test(absolute):想象demo所在位置
<style>
.par{
height:2500px;
border:1px solid red;
width:1000px;
margin-top:100px;
margin-left:100px;
background:blue;
}
.demo{
height:100px;
width:100px;
background:red;
position:absolute;
right:100px;
bottom:100px;
}
</style>
<body>
<div class="par">
<div class="demo"></div>
</div>
<body>
- fixed -----脱离正常标准流、不受制与父元素
- inherit----继承
4. z-index:可以设置元素的叠加顺序，但依赖·定位属性·
- z-index大的元素会覆盖z-index小的元素
- z-index为auto的元素不参与层级比较
- z-index为负值，元素被普通流中的元素覆盖
