absolute绝对定位的非绝对定位用法
一、absolute绝对定位的流行用法
一般而言,我们会用absolute绝对定位做什么呢?就是绝对定位,顾名思意,定死在某个位置上。例如,lightbox效果就是使用的绝对定位,例如新浪微博的弹出提示信息,我要转发李冰冰姐姐的微博,结果就会弹出:
还有就是与父relative相对定位标签结合使用,实现相对于父标签的绝对定位效果,例如人人网的搜索下拉菜单效果:
这里用法少不了的是left
(right
)绝对定位值或是top
(bottom
)值,否则绝对定位的位置会跟设置了left为0,top为0值一样
>
。好,我这里特意斜体加粗,为什么呢?因为这句话是不正确的,如果您没有意识到,说明您有必要好好看看这篇文章了。
well, 可能别人不是如此,但我对position:absolute
的理解,可以说很长一段时间都是不到位的,或者或是一直没有机会好好的静下心来研究,知道个大概,于是就会有一些错误的认识。其中之一就是上面提到的,position
为absolute
的元素如果没有设置left
, top
等值与left:0;
top:0
的的效果一样,一样吗?其实不一样。
二、absolute元素的margin定位
absolute定位于margin定位似乎是冤家,某种定义上讲,两者作用一致,都可以定位,似乎两者水火不容,竞争对手,确实,大部分情况下是,但是没有设置定位数值的absolute元素可以通过margin来进行定位。举个小例子吧,见下面的代码,一张绝对定位的图片,含margin属性,无left,top等定值数值:
absolute
定位与margin
定位其实是没有什么冲突的,无论absolute
元素时候设置了left
/top
值,其margin
属性值都是可以起作用的。下面展示的是没有left/top值的absolute元素的margin定位。
img src="zxx.jpg" width="90" height="111" style="position:absolute; margin:50px 0 0 50px; " />
结果如下图:
您可以狠狠地点击这里:该小例子demo
可见absolute
元素可以通过margin
进行定位。前提就是没有设置left或是top之类的定位数值。我是这么理解的,对于没有设置绝对定位值的absolute
绝对定位元素并没有脱离文档流,依旧在demo中(可能不正确)(现纠正:此理解是错误的,已脱离文档流),证据如下:我们再一个普通的div
中(无任何样式)放置一个无绝对定位值的absolute
元素,这个元素依旧子啊这个div
中,而没有跑到div
之外,例如如下的示例代码:
div style="width:200px; height:120px; background:#f0f3f9; margin:40px; "> img src="zxx.jpg" style="posITion:absolute; " /> /div>
结果如下图:
您可以狠狠地点击这里:该示例demo
可以说,没有设置定位值的absolute
元素是个普通又不普通的元素,普通之处在于其依旧在DOM tree中,对margin
等属性敏感;不普通在于其实际的高宽都丢失了。这非常类似于浮动(float),浮动的本质就是“包裹与破坏”,破坏高度,浮动元素的实际占据高度为0
(具体点这里);而absolute
元素(无定位值)也是“包裹与破坏”,只是其“破坏”比float更加凶猛,不仅实际的高度没有,连实际的宽度也没有。说句不严谨的结论:绝对定位元素就是个比浮动元素更加变态的近亲。
三、绝对定位元素的非绝对定位
从上面一部分我们可以得到两个结论:其一,无定位值的absolute
元素可以使用margin
定位;其二,无定位值的absolute
元素是个没有实际宽度的浮动元素。
这两点很重要,我们可以使用这两个特性实现一些特别的定位效果。两个例子,一是文字投影效果,二是自适应布局。
文字的阴影效果
CSS3中有text-shadow
属性可以实现文字阴影效果,但是IE对CSS3的支持不佳,所以我们需要想替他的方法实现,absolute
+margin
是个很好很简单的方法,见下面的效果图,截自Firefox3.5:
相关css代码代码如下:
.zxx_show{ padding:20px; background:#f0f3f9; color:#aaaaaa; font-Size:14px; } .zxx_text{ position:absolute; margin:-1px 0 0 -1px; color:#333333; }
HTML代码:
div class="zxx_show"> span class="zxx_text"> 这是一段用来测试的文字,看看是否有投影效果~~/span> 这是一段用来测试的文字,看看是否有投影效果~~ /div>
您可以狠狠地点击这里:文字投影效果demo
绝对定位元素需要写在投影文字之前,因为absolute
元素实际占据的高度宽度都是0
,所以文字可以自然而然的在其下方显示,由于下方的文字颜色较浅,于是便形成投影效果。此方法很精妙,可惜有小小兼容性差异,IE6下投影方向是水平朝右,IE7是右上方向,需要hack修复。
自适应布局
没有定位值的absolute
元素是个更加变态的float
元素,所以浮动元素干的某些事情absolute
元素也能做,例如自适应布局。例如faceBook动态头像与内容描述就是使用的这个方法。
由于头像的宽度固定,所以对于描述标签,我们可以使用margin
或是padding
撑开一段距离,头像使用无定位值的absolute
定位,这样就实现了头像与描述的自适应布局效果了。
例如,我的博客个人信息简介处,现在就是使用的float
自适应布局,其实将float
属性替换成absolute
,效果一样的,见下图:
关于absolute
的自适应应用,我也做了个demo,您可以狠狠地点击这里:absolute自适应布局demo
下图为demo效果截图:
absolute
绝对定位的非绝对定位应用肯定还有其他,只要记住无定位值的absolute
元素就是个连实际宽度也没有的float
浮动元素就可以了,然后利用这个特性,发挥您的创造力,实现更多更精彩的效果吧。
四、最后的小结
最后,先回答下开始悬而位答的问题:position
为absolute
的元素如果没有设置left
, top
等值与left:0;
top:0
的的效果为何不一样?相信您应该知道答案了,例如一个div
中有个absolute
属性元素,其没有left
或是top
值,其会像个普通的inline-block
属性元素一样静静地呆在这个div
里面,但是一旦设置了left:0;
top:0
对不起,这个absolute
元素立马变身,直接从DOM tree里面脱离,独立于文档流,结果相对于最近的relative
属性的祖先标签定位(如果没有,就body
定位)。由于我们平时使用absolute
都离不开left
,top
之类的值,所以才会概念不清。
每个CSS属性都有一段故事,需要我们静下心来发现,体会。
(本篇完)
觉得可用,就经常来吧! 欢迎评论哦! html5教程,巧夺天工,精雕玉琢。小宝典献丑了!
声明:本文内容由网友自发贡献,本站不承担相应法律责任。对本内容有异议或投诉,请联系2913721942#qq.com核实处理,我们将尽快回复您,谢谢合作!
若转载请注明出处: absolute绝对定位的非绝对定位用法
本文地址: https://pptw.com/jishu/586923.html