首页 > 代码库 > CSS通过设置position定位的三种常用定位

CSS通过设置position定位的三种常用定位

2024-09-27 07:51:02   218人阅读

　　CSS中可以通过设置为元素设置一个position属性值，从而达到将不同的元素显示在不同的位置，或者固定显示在某一个位置，或者显示在某一层页面之上。

position的值可以设为relative，absolute，fixed，static。

HTML代码里定义两个区块：

1 <div class="box">
2     <div class="box1"></div>
3 </div>

　　1.相对定位：

1 .box {
2     width: 50px;
3     height: 50px;
4     position: relative;
5     top: 50px;
6     left: 10px;
7 }

以上代码将实现将box以box最初的位置向右移动50px，向下移动10px。

　　2.绝对定位：

1 .box1 {
2     width: 10px;
3     height: 20px;
4     position: absolute;
5     top: 10px;
6     left: 10px;
7 }

以上代码将实现将box1的位置以当前的视口位置的原点为基准位置进行移动相应得距离；

如果将box1的父级设置了relative，那么box1将会以box的原点进行位移。

 1 .box {
 2     position: relative;
 3 }
 4 .box1 {
 5     width: 10px;
 6     height: 20px;
 7     position: absolute;
 8     top: 10px;
 9     left: 10px;
10 }

　　3.固定定位：

1 .box {
2     width: 50px;
3     height: 50px;
4     position: fixed;
5     top: 20px;
6     left: 0px;
7 }

以上代码将会将box固定在视窗的距离顶部20px的左侧边缘位置。

使用注意点：

1.绝对定位会使元素脱离文档流，位于定位元素后面的元素将会移动到该元素的位置去填补空白区域；

2.一般情况下，绝对定位都会和ixnagdui相对一起使用；

3.使用fixed和absolute时，一定要认清谁是基准位置。

实例：实现将图片显示在视窗的固定位置（不是顶部或者底部），不随窗口的缩放而改变元素的相对位置。

1 <div class="aside-cover">
2     <div class="cover">
3          <div class="aside-left">
4               <img src="img/batlogoX.png" alt="left"/>
5          </div>
6     </div>
7 </div>
.cover {
    width: 500px;
    height: 364px;
    margin: auto;
    position: relative;
}
/*第二级子级绝对定位*/
.aside-left {
    width: 60px;
    height: 94px;
    position: absolute;
    top: 422px;
    left: -0.2%;
    overflow: hidden;
}
/*图片相对定位*/
.aside-left img {
    position: relative;
    left: -64px;
    top: -125px;
}

通过以上代码就可以实现将想要显示的图片内容区域显示在视窗的固定位置。

 

 

　

CSS通过设置position定位的三种常用定位


联系
我们