CSS中能够透过设置为成分设置三个position属性值,从而完结将差异的成分展现在差别的职责,可能固定展现在某二个职位,可能展现在某一层页面之上。

CSS通过设置position定位的二种常用定位,cssposition

  CSS中能够因此设置为要素设置一个position属性值,从而实现将分歧的要素展现在区别的职责,或然固定展现在某叁个职位,只怕展现在某一层页面之上。

position的值能够设为relativeabsolutefixedstatic

HTML代码里定义多个区块:

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

  一.相持牢固:

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

以上代码将落到实处将box以box最初的任务向右移动50px,向下活动10px。

  二.万万定位:

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

上述代码将落到实处将box1的岗位以当下的视口地点的原点为标准地方实行移动相应得距离;

只要将box一的父级设置了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 }

  叁.永久定位:

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

以上代码将会将box固定在视窗的离开顶部20px的右侧边缘地点。

动用注意点:

一.纯属定位会使成分脱离文书档案流,位于定位成分后边的成分将会活动到该因素的职位去填补空白区域;

二.貌似情状下,相对定位都会和ixnagdui相对一同行使;

三.选用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;
}

永利开户送38元体验金,经过上述代码就可以实现将想要呈现的图纸内容区域显示在视窗的平素地方。

 

 

 

CSS中可以透过设置为要素设置三个position属性值,从而落成将分裂的因素显示在差别的地点…

position的值能够设为relativeabsolutefixedstatic

HTML代码里定义多个区块:

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

  一.绝对固定:

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

如上代码将落到实处将box以box最初的任务向右移动50px,向下活动10px。

  二.纯属定位:

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

如上代码将贯彻将box1的岗位以如今的视口地方的原点为规范地方举行运动相应得距离;

如果将box1的父级设置了relative,那么box一将会以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 }

  三.定位定位:

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

上述代码将会将box固定在视窗的离开顶部20px的左边手边缘地点。

动用注意点:

一.万万定位会使成分脱离文书档案流,位于定位成分前面包车型客车因素将会活动到该因素的岗位去填补空白区域;

贰.一般意况下,相对定位都会和ixnagdui相对一同行使;

叁.应用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;
}

由此上述代码就能够实现将想要呈现的图样内容区域展现在视窗的定点地点。

 

 

 

相关文章