css中绝对定位中的left和top属性
生活随笔
收集整理的這篇文章主要介紹了
css中绝对定位中的left和top属性
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
<html><head><title>Absolute Position</title><style type = "text/css">/*body具有紅色邊框，寬度300px，高度300px*/body {border: 1px solid red;width: 300px;height: 300px;}/*被絕對定位,顏色為silver*/div.one {background: silver;width: 100px;height: 100px;position: absolute;}/*沒有被絕對定位，有綠色邊框*/div.two {width: 250px;height: 100px;border: 2px solid green;text-align: center;}/*被絕對定位，顏色為gold*/div.three {background:gold;width: 100px;height: 100px;position: absolute;left: 60px; /*設(shè)置了left的值，未設(shè)定top*/}</style></head><body><div class = "one"></div><div class = "two">文本div</div><div class = "three"></div></body> </html>
?
css中絕對定位的元素left和top屬性受到原來為脫離文檔流之前的位置的影響，代碼如下:
運行結(jié)果:
從運行結(jié)果可以看到，gold色的div位于綠色邊框的div下面。
這是因為在樣式中雖然沒有給出gold色div框的top的值，但是如果沒有被絕對定位，也就是gold色的div位于正常流的時候，它將離它現(xiàn)在的包含塊(也就是body)上內(nèi)邊距(padding上邊界)102px(綠色div的高100px + 邊框?qū)?px),因此，雖然top的值未被給出，實際上它的值就是102px。
轉(zhuǎn)載于:https://www.cnblogs.com/chaoguo1234/archive/2013/03/03/2941783.html
總結(jié)
以上是生活随笔為你收集整理的css中绝对定位中的left和top属性的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 解密！！！！！！！！！！！！！！！！求高
- 下一篇： 【CLR的执行模型:将源代码编译成托管模