CSS中应用position的absolute和relative的属性制作浮动层

我的浮动层结构大概如下:

<div id="father">

<div id="son">

</div>

</div>

要实现的是son层的浮动。

刚开始的时候想着通过z-index的值来实现不同的层,position属性都没有特别关注。

但是结果怎么也出不来,后来查找资料得知position属性可以理解为是本元素针对父元素的定位。

只要把本元素的position属性设置为:absolute,然后把父元素的position属性设置为:relative,那么本元素的left,top属性就是针对父元素的值了,而不是正对document窗口了。

本例中当father的position为relative时,son的position为absolute才有效。这时候son的left:0;top:0就不再针对document窗口了,而是针对id为father的这个div了。

参考网址:http://blog.csdn.net/redhat456/article/details/2574361

时间: 2024-10-10 20:49:09

CSS中应用position的absolute和relative的属性制作浮动层的相关文章

CSS中的 position::absolute和position:relative

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

css中的position:relative和absolute 属性

语法: position : static | absolute | fixed | relative 取值: static :默认值.无特殊定位,对象遵循HTML定位规则 absolute :将对象从文档流中拖出,使用 left , right , top , bottom 等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位.如果不存在这样的父对象,则依据 body 对象.而其层叠通过 z-index 属性定义 fixed :未支持.对象定位遵从绝对(absolute)方式.但是要遵守

CSS position的absolute和relative的解析[转]

定位一直是WEB标准应用中的难点,如果理不清楚定位那么可能应实现的效果实现不了,实现了的效果可能会走样.如果理清了定位的原理,那定位会让网页实现的更加完美. 定位的定义:在CSS中关于定位的内容是:      position:relative | absolute | static | fixed static(静态) 没有特别的设定,遵循基本的定位规定,不能通过z-index进行层次分级. relative(相对定位) 对象不可层叠.不脱离文档流,参考自身静态位置通过 top,bottom,

CSS中的Position属性和Float属性

Css中的position很重要,常用有以下几个值:static,relative,absolute,fixed.Inherit. Static:静态定位.如果你没有设置position属性,那么缺省就是static.top.left.right.bottom等 属性,在static的情况下是无效的,要使用这些属性,必须把position设置为其他三个值之一. Relative:相对定位.元素将按照静态定位时的位置进行调整,在静态定位中分配给元素的空间仍会分 配给他,他两边的元素不会向它靠近来填

里面的div没有设置宽高,用padding设置的50px来撑开宽高,这个时候就需要用position:absolute或者relative来让文本去掉继承的外层的整宽度

1. <!DOCTYPE html><html><head><style>*{margin:0px;padding:0px;}#div1{position: relative;height: 200px;width: 200px;margin: 100px;padding:10px;border: 1px solid black;} #div2{padding:50px;position: absolute;border: 1px solid black;b

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

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

css中的position属性

在css布局中,position发挥了极其重要的作用,很多的网页布局都要用position来完成.position有四个属性值static.absolute.relative.fixed. static 这个属性表示默认的位置,在设置它的时候,可以取消继承属性,在一般情况下则不需要设置这个属性. absolute 这个属性表示绝对定位.绝对定位的元素的位置相对于最近的已定位祖先元素,如果元素没有已定位的祖先元素,那么它的位置就会相对于最初的包含块.元素原先在正常文档流中所占的空间会关闭,就好像该

css中关于position属性的探究(原创)

关于position属性的设置,头脑中一直觉得不是很清楚,所以借助这次机会单独自己测试了一下,记作学习笔记. 首先,css的position属性包含下面四种设置情况: static:默认属性.指定元素按照常规的文档内容刘(从左到右,从上到下)进行定位. absolute:独立定位,它的定位要么是相对于最近的定位祖先元素,要么是相对于文档本身. fixed:该值指定元素是相对于浏览器窗口进行定位的.不会随着文档其他部分而滚动. relative:元素按照常规文档流进行布局,它的定位相对于文档流中的

CSS中的position定位

CSS定位有4中类型:通过position属性设置http://www.w3school.com.cn/cssref/pr_class_position.aspstatic:默认值.没有定位,元素出现在正常的流中(忽略top,bottom,left,right或者z-index声明)relative:生成相对定位的元素,相当于其正常位置进行定位.因此,"left:20" 会向元素的 LEFT 位置添加 20 像素.absolute:生成绝对定位的元素,相对于 static 定位以外的第