在CSS中固定定位的问题

html-css07

在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(层叠样式表)_

可以用css定位让指定层在浏览器正中间。

1、新建html文档,在body标签中添加一个div标签,为这个标签设置宽高,这里以200px为例:

2、添加定位代码“position: absolute”,并且设置相对左侧和顶部的距离为“50%”:

3、最后设置指定层的左外边距和顶外边距的大小为指定层宽高的一半,这时指定层就会在浏览器的正中间:

Position属性确认元素的定位

static 是默认定位值,它的定位元素不受top、left、right、bottom的影响,也就是说你给元素设置这四个属性的任何值都没有效果

relative 相对定位,设置相对定位元素的top、left、right、bottom会使当前元素相对于当前位置做一定的偏移。

比如说在做表单布局的时候,有时候label的值并没有和输入框上下居中对齐,它有一点点偏下,效果不是很好看,这个时候我们可以给label向上设置一下偏移让他们居中对齐

absolute是绝对定位,绝对定位的元素相对于最近的定位祖先元素进行定位,如果没有定位祖先元素,那么就按body定位

absolute最典型的例子就是结合relative一块完成效果,比如我有一个p,它是在页面居中的,但是它的宽度和高度是动态的,我们还有一个span标签希望永远在这右下角10px的位置,这个时候我们就可以利用absolute完成

fixed 是相对视口定位的,简称浮云定位,这个意味着就像你滚动页面,它始终位于同一个位置,top、left、right、bottom用于设置当前元素的位置。

常用的例子就是页面右下角,滚动到顶部的的功能,我们可以对这个元素设置fixed浮动定位,当用户一直向下滚动浏览网页后,想一下子回到顶部,它只要点这个元素就行了,因为之个元素是浮云定位,所以永远是在用户可视范围的右下角