定位指的就是将指定的元素摆放到页面的任意位置
通过定位可以任意的摆放元素
- 通过position属性来设置元素的定位
-可选值:
static: ['stætik] 默认值,元素没有开启定位
relative: ['relətiv] 开启元素的相对定位
absolute: ['æbsəlju:t] 开启元素的绝对定位
fixed:开启元素的固定定位(也是绝对定位的一种)
sticky: ['stiki] 开启元素的粘滞定位
定位应用(下拉框)
父元素相对定位子元素绝对定位(父相子绝)
css样式:
.box1{
width: 200px;
height: 50px;
background-color: purple;
position: relative;
margin: 0 auto;
}
.box2{
display: none;
width: 200px;
height: 200px;
background-color: orange;
position: absolute;
top: 50px;
}
.box1:hover>.box2{
display: block;
}
html主体:
<div class="box1">
<div class="box2"></div>
</div>
定位演示