h5--------相对定位，绝对定位

最新推荐文章于 2022-10-26 11:02:25 发布

gotoschool_j

最新推荐文章于 2022-10-26 11:02:25 发布

阅读量8.8k

点赞数

相对定位

效果图

<!DOCTYPE html>

<html>
<head>
<meta charset="utf-8" />
<title></title>

<style type="text/css">

.box1{
width: 200px;
height: 200px;
background-color: red;
}

.box2{
width: 200px;
height: 200px;
background-color: yellow;
/*
* 定位：
* - 定位指的就是将指定的元素摆放到页面的任意位置
* 通过定位可以任意的摆放元素
* - 通过position属性来设置元素的定位
* -可选值：
* static：默认值，元素没有开启定位
* relative：开启元素的相对定位
* absolute：开启元素的绝对定位
* fixed：开启元素的固定定位（也是绝对定位的一种）
*/

/*
* 当元素的position属性设置为relative时，则开启了元素的相对定位
* 1.当开启了元素的相对定位以后，而不设置偏移量时，元素不会发生任何变化
* 2.相对定位是相对于元素在文档流中原来的位置进行定位
* 3.相对定位的元素不会脱离文档流
* 4.相对定位会使元素提升一个层级
* 5.相对定位不会改变元素的性质，块还是块，内联还是内联
*/
position: relative;

/*
* 当开启了元素的定位（position属性值是一个非static的值）时，
* 可以通过left right top bottom四个属性来设置元素的偏移量
* left：元素相对于其定位位置的左侧偏移量
* right：元素相对于其定位位置的右侧偏移量
* top：元素相对于其定位位置的上边的偏移量
* bottom：元素相对于其定位位置下边的偏移量
*
* 通常偏移量只需要使用两个就可以对一个元素进行定位，
* 一般选择水平方向的一个偏移量和垂直方向的偏移量来为一个元素进行定位
*/

/*left: 100px;
top: 200px;*/

left: 200px;

}

.box3{
width: 200px;
height: 200px;
background-color: yellowgreen;

}

.s1{
position: relative;
width: 200px;
height: 200px;
background-color: yellow;
}

</style>

</head>
<body>

<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>

<span class="s1">我是一个span</span>

</body>

</html>

绝对定位

效果图

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>

<style type="text/css">

.box1{
width: 200px;
height: 200px;
background-color: red;
}
.box2{
width: 200px;
height: 200px;
background-color: yellow;
/*
* 当position属性值设置为absolute时，则开启了元素的绝对定位
*
* 绝对定位：
* 1.开启绝对定位，会使元素脱离文档流
* 2.开启绝对定位以后，如果不设置偏移量，则元素的位置不会发生变化
* 3.绝对定位是相对于离他最近的开启了定位的祖先元素进行定位的（一般情况，开启了子元素的绝对定位都会同时开启父元素的相对定位）
* 如果所有的祖先元素都没有开启定位，则会相对于浏览器窗口进行定位
* 4.绝对定位会使元素提升一个层级
* 5.绝对定位会改变元素的性质，
* 内联元素变成块元素，
* 块元素的宽度和高度默认都被内容撑开
*/
position: absolute;

/*left: 100px;
top: 100px;*/

}
.box3{
width: 300px;
height: 300px;
background-color: yellowgreen;
}

.box4{
width: 300px;
height: 300px;
background-color: orange;
/*开启box4的相对定位*/
/*position: relative;*/
}

.s1{
width: 100px;
height: 100px;
background-color: yellow;

/*开启绝对定位*/
position: absolute;
}

</style>

</head>
<body>

<div class="box1"></div>
<div class="box5">
<div class="box4">
<div class="box2"></div>
</div>
</div>

<div class="box3"></div>

<span class="s1">我是一个span</span>
</body>
</html>