css的position:absolute

绝对定位的特性:1.绝对定位的元素以前所占空间会释放,脱离普通文档流,在层级上是最上层的,所以会覆盖html里它的下面的元素。

用途:不用relative限制absolute,(有利于样式的复用),a.实现一个小东西在一个块上。

2.绝对定位的元素有位置跟随的特性,即跟随它html结构里的上一个元素(“ ”也可以)。

用途:a.用于布局写某个小东西在某元素的后面(上下左右均可),用margin调距离。

3.绝对定位后元素出现的位置和没定位时一样,可用top,right,bottom,left,margin来调整(负margin也好,兼容到IE6)。

用途:想去哪去哪,但是会覆盖其他的元素。

注意事项:用一些标签会有间距,可以在写html结构时让两个标签无间距<img></img><i></i>.

4.绝对定位的限制,受限于absolute,relative,fixed。

5.绝对定位影响浮动,若加在父元素上,则内部元素浮动无效,同级则不影响,也可以去除元素自身的浮动。

注意事项:和浮动的区别,浮动的遇到文字不会覆盖。浮动的历史为文字环绕效果。

6.绝对的布局,高100%,头和脚高固定,高有溢出部分出现滚动条。

<div class="page">

<div class="header"></div>

    <div class="content"></div>
    <div class="footer"></div>
</div>

html,body{
height:100%;//必须写,默认的body的高为0;
}
.page{
position:absolute;left:0;top:0;right:0;bottom:0;background-color:yellow;
}
.header{
position:absolute;left:0;top:0;right:0;height:100px;background-color:blue;
}
.footer{
position:absolute;left:0;right:0;bottom:0;height:100px;background-color:red;
}
.content{
position:absolute;top:100px;bottom:100px;overflow: auto;
}

时间: 2024-11-07 19:25:45

css的position:absolute的相关文章

css中position(absolute)与margin同时使用的情况

1,当元素绝对定位以后,它在父元素的位置是根据top/left/right/bottom来定位的,而margin是根据自身当前位置来定位的 2,当它距离父元素left:50%,top:50%,那就是父元素一半的距离,因为要实现居中即自身的中点在父元素的中间才算,所以margin-left/margin-top 负的自身宽/高的一半,那么正好水平垂直居中. 3,元素在绝对定位以后,left/rigth和top/bottom是没有优先等级的,不像margin-left作用的时候margin-righ

IE6下面 position:absolute 失效导致绝对定位层不显示的原因

在网上看到的,最近遇到好几次,总结就是 当你发现某元素在IE6,7下面无法显示的时候,且这个元素是经过position absolute的,加之前后之类的有浮动,你就要考虑一下兄弟元素,有时候是前面,有时候是后面,加一个<div class="clearboth"></div> 今天早上重构一个机票订购页面的时候,为了配合JS特效所以需要写一个绝对定位浮动层,写完在测试的时候发现,在FF.ie8.ie7.op下都可以正常显示,可是到了IE6的时候,这个绝对定位浮

CSS中position属性( absolute | relative | static | fixed )详解

我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. relative:对象遵循正常文档流,但将依据top,right,bottom,left等属性在正常文档流中偏移位置.而其层叠通过z-index属性定义. absolute:对象脱离正常文档流,使用top,right,bottom,left等属性进行绝对定位.而其层叠通过z-index属性定义. fixed:对象脱离正常文档

css position: absolute、relative详解

CSS2.0 HandBook上的解释: 设置此属性值为 absolute 会将对象拖离出正常的文档流绝对定位而不考虑它周围内容的布局.假如其他具有不同 z-index 属性的对象已经占据了给定的位置,他们之间不会相互影响,而会在同一位置层叠.此时对象不具有外补丁( margin ),但仍有内补丁( padding )和边框( border ). 要激活对象的绝对(absolute)定位,必须指定 left , right , top , bottom 属性中的至少一个,并且设置此属性值为 ab

css中position属性(absolute|relative|static|fixed)的区别

position属性的相关定义:static:无特殊定位,对象遵循正常文档流; relative:对象遵循正常文档流; absolute:对象脱离正常文档流; fixed:对象脱离正常文档流 我们先来看看CSS3 Api中对position属性的相关定义: static:无特殊定位,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. relative:对象遵循正常文档流,但将依据top,right,bottom,left等属性在正常文档流中偏移位置.而其层叠通过z-

css中position属性(absolute/relative/static/fixed)

css中position属性(absolute/relative/static/fixed): position:static   无特殊定位,是html元素默认的定位方式,对象遵循正常文档流.top,right,bottom,left等属性不会被应用. position:relative 对象遵循正常文档流,相对的是它原本在文档流中的位置而进行的偏移,但将依据top,right,bottom,left等属性在正常文档流中偏移位置.而其层叠通过z-index属性定义. position:abso

CSS之float vs position:absolute

补充:ul 应该设置下 list-style: none; 题外话:看了张鑫旭的视频,这家伙把简单的css玩出了新花样,绝对大神级的存在.膜拜下先~ float的作用前面一章已经说过了,但没考虑过的是 position:absolute 作用与float极其类似. 二者都是将自身浮空(垂直于屏幕) -- 其实是将其容器高度塌陷. 不同点在于:float会改变位置,但 position:absolute 则会保存其原有位置!!! 利用 position:absolute 的这个特性,我们可以更好的

【CSS】关于position:absolute布局

在网页中,如果需要left与top属性生效,就必须为这个div的style属性加入position:absolute,这样,此div才能游离于整体的div布局之外,也就是说,你没有加position:absolute之前,所有的div遵循我在<[CSS]关于div的对齐与网页布局>(点击打开链接)所提到的,各种各样布局. 例如下面的代码: <div style="position:absolute; left:100px; top:100px; width:20px; heig

怕忘记了CSS中position的absolute和relative用法

CSS2.0中的定位确实有时会把人弄糊涂,所以今天给它记下来,同时供以后查阅.下面写的内容有一部分借鉴了w3cschool和divcss5这两个官方网站,在此处特别的说明一下 CSS2.0中position主要用于HTML元素的定位,在实际设计中还是非常有用的.但是对于学习者来说都会遇到相对定位和绝对定位到底如何使用,非常打脑壳 不管再咋个打脑壳,大家首要的还是记住position的几个属性值 static: HTML元素的默认定位方式 absolute: 将对象从文档流中拖出,使用left,r