admin管理员组文章数量:1610849
position定位方式
1.position:static 无定位(默认值)
(1).元素出现在正常文档流(top、right、left、bottom等属性不使用)
(2).当没有对一个元素指定定位时,使用static(默认),也就是按照文档的流式(flow)定位,将元素放到合适位置
(3).在不同分辨率下,采用流式布局可以很好地自适应,取得较好布局
2.position:inherit 继承父元素的定位方式
3.position:relative 相对定位
(1).不影响元素本身特性,没有偏移量时对元素无影响
(2).相对定位的元素仍然在文档流中,仍然占据着他本来占据的位置空间(虽然他现在已经不在本来的位置了)
(3).相对于其正常位置进行定位。元素的位置通过偏移值(“left”、“top”、“right”、“bottom”)进行规定
(4).提升层级,用z-index样式的值可以改变一个定位元素的层级关系,从而改变元素的覆盖关系,值大者在上面
#id1{
width:300px;
height:300px;
background-color:chartreuse;
position:relative;
left:20px;
}
#id2{
width:300px;
height:300px;
background-color:cornflowerblue;
}
4.position:absolute 绝对定位
(1).使元素从文档流中被删除,结果就是该元素原本占据的空间被其它元素所填充
(2).使内联元素在设置宽高的时候支持宽高,区块元素在未设置宽度时由内容撑开宽度(改变元素的特性)
(3).相对于 static 定位以外的第一个祖先元素进行定位(其父元素没有定位则逐层上找,直到document)。元素的位置通过偏移值进行规定
(4).提升层级,用z-index样式的值可以改变一个定位元素的层级关系,从而改变元素的覆盖关系,值大者在上面
#id1{
width:300px;
height:300px;
background-color:chartreuse;
position:absolute;
left:20px;
}
#id2{
width:300px;
height:300px;
background-color:cornflowerblue;
}
5.position:fixed 固定定位
(1).元素的表现类似于将 position 设置为 absolute,不过其包含块是视窗(window)本身
(2).定位效果类似之前学过的固定背景,元素与视窗始终相对静止。元素的位置通过偏移值进行规定
(3).提升层级,用z-index样式的值可以改变一个定位元素的层级关系,从而改变元素的覆盖关系,值大者在上面
6.z-index:99 z轴的顺序
(1).当网页上出现多个定位所产生的浮动层时,必然就会产生一个问题,就是当这些层的位置产生重合时,谁在谁的上面
(2).x轴和y轴决定网页平面,z轴则是垂直于屏幕的虚拟坐标轴,浮动层在这个坐标轴上的顺序号就决定了谁上谁下
(3).定位才可以触发z-index属性,它没有单位,并可拥有负的属性值。默认值为0
position:relative和负margin都可以使元素位置发生偏移,有什么区别?
(1).相对定位可以使元素发生偏移,但是在文档流中,它仍然占据着原来的位置,所以其他元素的位置不会发生变化
(2).通过负margin偏移的元素会放弃偏移前占据的空间,后面的其它元素就会“流”过来填充,所以它们位置发生了变化
元素居中方式
1.行内块级元素垂直居中
基本思想是使用display: inline-block, vertical-align: middle和一个伪元素让内容块垂直居中于容器中央
#parent{
width:300px;
height:300px;
background-color:greenyellow;
}
#son{
width:200px;
height:200px;
background-color:cornflowerblue;
}
#parent::after,#son{
display:inline-block;
vertical-align:middle;
}
#parent::after{
content:'';
height:100%;
}
2.行内块级元素水平居中
如果“margin-left”和“margin-right”都是“auto”,那么它们的使用值是相等的。它将元素相对于包含块的边缘水平居中(要求子元素比父元素小,且只能做水平方向的居中)
.son{margin:0 auto;}
3.使用CSS3中新增的transform属性和position, 实现水平和垂直居中
#parent{
width:300px;
height:300px;
background-color:greenyellow;
}
#son{
width:200px;
height:200px;
background-color:cornflowerblue;
position:relative;
left:50%;
top:50%;
transform:translate(-50%,-50%);
}
4.使用定位position和负的margin来实现水平和垂直居中
#parent{
width:300px;
height:300px;
background-color:greenyellow;
position:absolute;
}
#son{
width:200px;
height:200px;
background-color:cornflowerblue;
position:relative;
left:50%;
top:50%;
margin-left:-100px;
/*margin-left: -0.5固定宽 */
margin-top:-100px;
/* margin-top:-0.5固定高 */
}
5.使用position定位方式, 以及left:0;right:0;margin:0 auto; —支持水平和垂直居中
#parent{
width:300px;
height:300px;
background-color:greenyellow;
position:absolute;
}
#son{
width:200px;
height:200px;
background-color:cornflowerblue;
position:absolute;
left:0;
top:0;
right:0;
bottom:0;
margin:auto;
}
6.利用弹性盒模型
#parent{
width:300px;
height:300px;
background-color:chartreuse;
position:absolute;
display:flex;
align-items:center;
justify-content:center;
}
#son{
width:200px;
height:200px;
background-color:cornflowerblue;
}
版权声明:本文标题:web前端的position定位及元素居中方式 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/xitong/1728604607a1165293.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论