在CSS中固定定位的问题

html-css019

在CSS中固定定位的问题,第1张

1、绝对定位 和 固定定位 的元素若没有设置 top/right/left/bottom 的值。其位置为原来在文档流中的位置。其他文档流元素会占据其原来位置。

要使绝对定位或固定定位的元素水平居中,需要设置其 width 为固定值,并且 left: 0right: 0。

2、绝对定位 和 固定定位 的元素,若其宽度 width 或高度 height 的单位为 百分比 ,宽度和高度值是相对于其基于定位的元素计算的。(在使用一些stick插件时尤其要注意这点)。

扩展资料:

CSS技巧 

1、div的垂直居中问题 vertical-align:middle将行距增加到和整个DIV一样高 line-height:200px然后插入文字,就垂直居中了。缺点是要控制内容不要换行 

2、 margin加倍的问题 设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上 display:inline例如: <#div id=”imfloat”>相应的css为 #IamFloat{ float:leftmargin:5px/*IE下理解为10px*/ display:inline/*IE下再理解为5px*/} 

3、浮动ie产生的双倍距离 #box{ float:leftwidth:100pxmargin:0 0 0 100px//这种情况之下IE会产生200px的距离 display:inline//使浮动忽略} 这里细说一下block与inline两个元素:block元素的特点是,总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素)。

参考资料:百度百科 CSS(层叠样式表)_

1、绝对定位+margin:auto

<style type="text/css">

.wrp {        background-color: #b9b9b9       width: 240px       height: 160px   }

.box {        color: white       background-color: #3e8e41       width: 200px       height: 120px       overflow: auto   }

.wrp1 { position: relative}

.box1 {        margin: auto       position: absolute       left: 0right: 0top: 0bottom: 0   }</style><div class="wrp wrp1">

<div class="box box1">

<h3>完全居中层1:</h3>

<h3>开发工具 【 WeX5 】: 高性能轻架构、开源免费、跨端、可视化</h3>

</div></div>1234567891011121314151617181920212223242526

效果: 

实现原理:利用css定位规则,设置左右、上下方向定位为0,margin为auto,让css根据定位计算margin值,用hack的方式实现居中。居中块(绿色)的尺寸需要可控,因为css计算margin时也需要参考尺寸值,由于四周为0,所以自动计算的尺寸是与父容器一样的。无论是设置width、height或者是 max-height、max-width,都是让尺寸不会扩大到与父级一样。

2、绝对定位+margin反向偏移

</style><style type="text/css">

.wrp2 { position: relative}

.box2 {        position: absolute       top: 50%left: 50%       margin-left: -100px/* (width + padding)/2 */

margin-top: -75px/* (height + padding)/2 */

}</style><div class="wrp wrp2">

<div class="box box2">

<h3>完全居中方案二:</h3>

<h3>开发工具 【 WeX5 】: 高性能轻架构、开源免费、跨端、可视化</h3>

</div></div>12345678910111213141516

效果: 

实现原理:由于top、left偏移了父对象的50%高度宽度,所以需要利用margin反向偏移居中块的50%宽高。而margin中不能使用百分比,因为百分比是针对父对象的,所以需要手动计算定值指定margin值。这个方案需要固定尺寸值,以此来计算margin反向偏向值,所以方案2比方案1稍差!

3、绝对定位+transform反向偏移

<style type="text/css">

.wrp3 { position: relative}

.box3 {        margin: auto       position: absolute       top: 50%left: 50%       -webkit-transform: translate(-50%, -50%)       -ms-transform: translate(-50%, -50%)       transform: translate(-50%, -50%)   }</style><div class="wrp wrp3">

<div class="box box3">

<h3>完全居中方案三:</h3>

<h3>开发工具 【 WeX5 】: 高性能轻架构、开源免费、跨端、可视化</h3></div>12345678910111213141516

效果: 

实现原理:方案3与方案2原理一样!不同点是使用了transform来代替margin做反向偏移,由于transform的计算基准是元素本身,所以这里可以用50%来做反向偏移。这个方案也需要固定尺寸值,浏览器以此为基准来计算定位!

4、display:tabel

<style type="text/css">

.wrp4 { display: table}

.subwrp4 {        display: table-cell       vertical-align: middle   }

.box4 {        margin: auto       overflow-wrap: break-word       height: auto       max-height: 80%       max-width: 80%   }</style><div class="wrp wrp4">

<div class="subwrp4">

<div class="box box4">

<h3>完全居中方案四:</h3>

</div>

</div></div>123456789101112131415161718192021

效果: 

实现原理:方案4是实现效果比较好的,居中块的尺寸可以做包裹性,缺点是增加了一层table-cell层来实现垂直居中。方案4的居中块可以设置 max-height、max-width,而且居中块是可以具有垂直方向的包裹性的。水平方向由于是在table-cell里面的,所以会直接显示max-width,也就是宽度趋大。

5、display: inline-block

<style type="text/css">

.wrp5 {        text-align: center       overflow: auto   }

.box5 {        display: inline-block       vertical-align: middle       width: auto       height: auto       max-width: 90%       max-height: 90%   }

.wrp5:after {        content: ''       display: inline-block       vertical-align: middle       height: 100%       margin-left: -0.25em       /* To offset spacing. May vary by font */

}</style><div class="wrp wrp5">

<div class="box box5">

<h3>完全居中方案五:</h3>

<h3>开发工具 【 WeX5 】: 高性能轻架构、开源免费、跨端、可视化</h3>

</div></div>12345678910111213141516171819202122232425262728

效果: 

实现原理:原理:利用inline-block的vertical-align: middle去对齐after伪元素,after伪元素的高度与父对象一样,就实现了高度方向的对齐。方案5实现效果更加好,居中块的尺寸可以做包裹性、自适应内容,兼容性也相当好。缺点是水平居中需要考虑inline-block间隔中的留白(代码换行符遗留问题。)。方案4的居中块可以设置 max-height、max-width,而且居中块是可以具有水平垂直两个方向的自适应。

6、display: flex-box

<style type="text/css">

.wrp6 {        display: -webkit-flex       display: -moz-box       display: -ms-flexbox       display: -webkit-box       display: flex       -webkit-box-align: center       -moz-box-align: center       -ms-flex-align: center       -webkit-align-items: center       align-items: center       -webkit-box-pack: center       -moz-box-pack: center       -ms-flex-pack: center       -webkit-justify-content: center       justify-content: center   }

.box6 {        width: auto       height: auto       max-width: 90%       max-height: 90%   }</style><div class="wrp wrp6">

<div class="box box6">

<h3>完全居中方案六:</h3>

<h3>开发工具 【 WeX5 】: 高性能轻架构、开源免费、跨端、可视化</h3>

</div></div>1234567891011121314151617181920212223242526272829303132

效果: 

实现原理: flexbox布局。此乃布局终极大法,专治各种布局定位难题!优点:能解决各种排列布局问题,实现方式符合人类认知。缺点:PC端某些旧浏览器支持度不高。