position 为absolute时/float 为right，span为block

元素分为内联元素和区块元素两类(当然也有其它的),在内联元素中有个非常重要的常识,即内两元素是不可以设置区块元素所具有的样式,例如:width | height.relative : 原来是什么类型的依旧是什么类型.absolute | fixed : 元素就被重置为了区块元素,例如:打算为span元素指定大小,并绝对定位 <span style="position:absolute; width:100px; height:50px;">span</span…

position：absolute、float、display：inline-block 区别

position: absolute会导致元素脱离文档流,被定位的元素等于在文档中不占据任何位置,在另一个层呈现,可以设置z-index.PS的图层效果就是position: absolute. float也会导致元素脱离文档流,但还在文档或容器中占据位置,把文档流和其它float元素向左或向右挤,并可能导致换行.图片的文字环绕布局效果就是float. inline-block不脱离文档流,将block元素当作大型字符嵌入文档流内,类似于img或者input默认效果. 作者:Ivony链接:ht…

position 的absolute会使display变成inline-block

position:absolute和float会隐式地改变display类型,不论之前什么类型的元素(display:none除外), 只要设置了position:absolute. float中任意一个,都会让元素以display:inline-block的方式显示:可以设置长宽,默认宽度并不占满父元素.…

当父级是body时，子元素设置position：absolute；定位是根据body还是html呢？

position:absolute 元素相对最近的 position 为 absolute / relative / fixed 的祖先元素(包含块)定位,如果没有这样的祖先元素,则以初始包含块进行定位,而初始包含块并不是以<html>或<body>进行定位的.w3c关于包含块及初始包含块的定义我们可以做一下测试: <!DOCTYPE html> <html lang="en"> <head> <meta charse…

position:absolute和float会隐式的改变display类型

position:absolute和float会隐式的改变display类型,不论之前是什么类型的元素(display:none除外),只要设置了position:absolute或float,都会让元素以display:inline-block的方式显示,可以设置长宽,默认宽度并不占满父元素,就算是显示的设置display:inline或display:block,仍然无效. float在IE6下的双倍边距bug就是利用添加display:inline来解决的注意一点的是,position:…

position:absolute和float隐式改变display为inline-block

不论之前是什么类型的元素(display:none除外), 只要设置了position:absolute或float, 都会让元素以display:inline-block的方式显示, 可以设置长宽,默认宽度并不占满父元素, 就算是显示的设置display:inline或display:block,仍然无效.…

absolute 和float

position:absolute与float:left是近亲包裹性包裹性换种说法就是让元素inline-block化,例如一个div标签默认宽度是100%显示的,但是一旦被absolute属性缠上,则100%默认宽度就会变成自适应内部元素的宽度 float也是典型的inline-block化元素,这种元素的inline-block化适用于任何水平的标签.例如平时我们要让span标签支持width属性,可能要设置: span { display:block; width:100px; } 但…

position属性absolute与relative 详解

最近一直在研究javascript脚本,熟悉DOM中CSS样式的各种定位属性,以前对这个属性不太了解,从网上找到两篇文章感觉讲得很透彻,收藏下来,唯恐忘记.一.解读absolute与relative http://www.blueidea.com/tech/web/2006/4249.asp很多朋友问过我absolute与relative怎么区分,怎么用?我们都知道absolute是绝对定位,relative是相对定位,但是这个绝对与相对是什么意思呢?绝对是什么地方的绝对,相对又是相对于什么地…

CSS position relative absolute fixed

position属性absolute与relative 详解最近一直在研究javascript脚本,熟悉DOM中CSS样式的各种定位属性,以前对这个属性不太了解,从网上找到两篇文章感觉讲得很透彻,收藏下来,唯恐忘记. 一.解读absolute与relative 很多朋友问过我absolute与relative怎么区分,怎么用?我们都知道absolute是绝对定位,relative是相对定位,但是这个绝对与相对是什么意思呢?绝对是什么地方的绝对,相对又是相对于什么地方而言的呢?那他们又有什么…

position之absolute与relative 详解

absolute:绝对定位: relative:相对定位: 唉,以前只是知是知道这两个单词的汉语意思,然后呢,,,怎么用...也是摸凌两可的用.终于抽出时间来看看了: 1.绝对定位:absulute Absolute ---- position:absolute: 表示绝对定位,位置将依据浏览器左上角开始计算,配合TOP.RIGHT.BOTTOM.LEFT进行定位,在没有设定TRBL的情况下,默认依据父级的做标原始点为原始点.如果设定TRBL并且父级没有设定position属性,那么当前的ab…

position：absolute与position：relative

position的默认属性值均是static,静态. [position:absolute]定位为absolute的层脱离正常文本流,但其在正常流中的位置不再存在. 大多数人可能会觉得absolute绝对定位是根据浏览器窗口定位,实则不是.absolute定位是相对于父元素的绝对定位,且父元素必须有position:absolute或者position:relative:若其父元素没有,则逐层网上寻找,直至浏览器窗口. 绝对定位,他默认参照浏览器的左上角,配合TOP.RIGHT.BOTTOM.L…

div定位relative和absolute和float测试3

position等于absolute的时候,不一定是相对于浏览器定位,当div存在包含关系时,父div设置成relative,其中包含的div设置成absolute就是相对于该父div的了.该文测试了下,divall(背景图)这个包裹了六个小div(背景色),并把小div在divall里依次排列,间隔是10px.定位相关的div写在了行内样式,其他的与测试不太相关的写在了前面的style里. 父div设置了上边距和左边距,距离浏览器留了30px边距.设置里面的第一排小div绝对定位,top都是1…

css absolute和float，relative，z-index的同异

大神占楼: 简书作者:张歆琳 http://www.jianshu.com/p/a3da5e27d22b http://www.cnblogs.com/lxblog/p/3152897.html 摘录: float是欺骗父元素,让其父元素误以为其高度塌陷了,但float元素本身仍处于文档流中,文字会环绕着float元素,不会被遮蔽. absolute(层级高)其实已经不能算是欺骗父元素了,而是出现了层级关系. 一旦给元素加上absolute或float就相当于给元素加上了display:bloc…

CSS position绝对定位absolute relative

常常使用position用于层的绝对定位,比如我们让一个层位于一个层内具体什么位置,为即可使用position:absolute和position:relative实现. 一.position语法与结构 - TOP position语法: position : static absolute relative position参数:static : 无特殊定位,对象遵循HTML定位规则absolute : 将对象从文档流中拖出,使用left,right,top,bottom等属性进行绝对…

position为absolute的元素如何实现居中

当给div设置absolute时,该元素已经脱离文档流,呈现浮动状态,只能通过left,top,right,bottom来设置属性,要实现居中有两种方法: 一.css法 <div class="box"> </div> .box{ width: 100px; height: 100px; border:1px solid black; margin:0px auto; position: absolute; left: 50%; top:50%; margin-…

[转]relative、absolute和float

position:relative和position:absolute都可以改变元素在文档中的位置,都能激活元素的left.top.right.bottom和z-index属性.(默认这些属性未激活,设置了也无效) 设置position:relative和position:absolute都会让元素浮起来,会改变正常情况下的文档流. 不同: position:relative会保留自己在z-index:0层的占位,left.top.right.bottom值是相对于自己在z-index层的位置.…

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

我的浮动层结构大概如下: <div id="father"> <div id="son"> </div> </div> 要实现的是son层的浮动. 刚开始的时候想着通过z-index的值来实现不同的层,position属性都没有特别关注. 但是结果怎么也出不来,后来查找资料得知position属性可以理解为是本元素针对父元素的定位. 只要把本元素的position属性设置为:absolute,然后把父元素的positi…

relative、absolute和float

relative.absolute和float position:relative和position:absolute都可以改变元素在文档中的位置,都能激活元素的left.top.right.bottom和z-index属性.(默认这些属性未激活,设置了也无效) 设置position:relative和position:absolute都会让元素浮起来,会改变正常情况下的文档流. 不同: position:relative会保留自己在z-index:0层的占位,left.top.right.…

元素加了position：absolute则该元素的text-align:center居中失效的解决办法

position:absolute; top:50%; left:50%; -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); transform:translate(-50%,-50%); 当元素变为position:absolute时,该元素不占据文档流,text-align:center失效,则可以通过上述方法使元素中的内容垂直水平居中. 或者: 如果仅仅时元素中的文字居中的话, 给该…

CSS position属性absolute relative等五个值的解释

DIV CSS position绝对定位absolute relative教程篇常常使用position用于层的绝对定位,比如我们让一个层位于一个层内具体什么位置,为即可使用position:absolute和position:relative实现. 一.position语法与结构 - TOP position语法: position : static absolute relative position参数:static : 无特殊定位,对象遵循HTML定位规则absolute :…

CSS里面position：relative与position：absolute 区别

position:absolute这个是绝对定位:是相对于浏览器的定位.比如:position:absolute:left:20px;top:80px; 这个容器始终位于距离浏览器左20px,距离浏览器上80px的这个位置.position:relative是相对定位,是相对于前面的容器定位的.这个时候不能用top left在定位.应该用margin.比如: 当1固定了位置.1的样式float:left;width:100px; height:800px;2的样式为float:left;…

导航position：absolute

<html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>导航position:absolute</title> <style type="text/css">…

position：absolute 的深入探讨

position:absolute 参考谁进行定位的问题.之前大家可能会认为如果absolute元素的父级(祖父)元素没有设置position属性的时候,该元素的position:absolute会参考body进行定位. 换句话说是如果父级设置了position(且值为非static),参照(最近的)父级的内容区域的左上角为初始点,结合top left right bottom 进行定位: 如果没有设置,往其父级继续寻找,直到找到为止,如果一直没有,则相对与body进行定位(我猜想是这样的,但是…