CSS中position的几个属性值
生活随笔
收集整理的這篇文章主要介紹了
CSS中position的几个属性值
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
CSS中position的幾個屬性值
relative:relative 就是相對元素static定位時的位置進行偏移，如果指定static時top是50象素，那么指定relative并指定top是10象素時，元素實際top就是60象素了。
??? absolute:absolute絕對定位，直接指定top、left、right、bottom。有意思的是絕對定位也是“相對”的。它的坐標是相對其容器來說的。容器又是什么呢，容器就是離元素最近的一個定位好的“祖先”，定位好的意思就是其Position是absolute或fixed或relative。如果沒有這個容器，那就使用瀏覽器初始的，也就是body或者html元素。標準是說只需要指定left和right，width可以自動根據(jù)容器寬度計算出來，可惜ie不支持。
??? fixed:fixed才是真正的絕對定位，其位置永遠相對瀏覽器位置來計算。而且就算用戶滾動頁面，元素位置也能相對瀏覽器保持不變，也就是說永遠可以看到，這個做一些彩單的時候可以用。可惜的是ie還不支持
relative,absolute,fixed需要指定具體位置
??? relative,absolute,fixed如果不指定它的top,left等屬性，那么它的position實際上依然是static。使用了relative,absolute,fixed就必須指定具體的位置。
Java代碼 ?<html?>??? ?? <head>??? ?? <meta?http-equiv="content-type"?content="text/html"?charset="gb2312">??? ?? <style>?*{margin:0;padding:0}?</style>???? ?? </head>???? ?? <body>???? ?? ????<div?style="position:absolute;height:400px;width:400px;background:yellow;left:80px;top:80px;">??? ?? ????????<div?style="position:absolute;height:200px;width:200px;background:red;left:100px;top:80px;"></div>??? ?? ????????<div?style="position:relative;height:200px;width:200px;background:blue;left:186px;top:186px;"></div>??? ?? ????????<div?style="position:fixed;height:140px;width:140px;background:black;left:20px;top:20px;"></div> ?? ?? ????<!--黑色（black）的是fixed的，所以它直接以瀏覽器窗口開始計算left和top的值 ?? ????????????紅色(red)和藍色(blue)分別是absolute和relative他們都是從父對象開始計算left和top的值， ?? ????????????只是因為有一個是absolute所以產(chǎn)生了重疊效果，沒有被另外一個擠走。? ?? ? ?? ?????????-->??? ?? ????</div>??? ?? ????<div?style="position:static;height:140px;width:140px;background:brown;left:220px;top:220px;"></div>??? ?? ????<!--紫色(brown)的是static的，所以它的left和top沒有起作用，一直跑到最上面去了? ?? ??????????同時我也明白了另外一個道理，因為默認的類型都是static，所以當我們的頁面長度等定位的不合理時一個會把一個擠走。? ?? ????????--> ?? ?? </body>???? ?? </html>?? <html > <head> <meta http-equiv="content-type" content="text/html" charset="gb2312"> <style> *{margin:0;padding:0} </style> </head> <body> <div style="position:absolute;height:400px;width:400px;background:yellow;left:80px;top:80px;"> <div style="position:absolute;height:200px;width:200px;background:red;left:100px;top:80px;"></div> <div style="position:relative;height:200px;width:200px;background:blue;left:186px;top:186px;"></div> <div style="position:fixed;height:140px;width:140px;background:black;left:20px;top:20px;"></div> <!--黑色（black）的是fixed的，所以它直接以瀏覽器窗口開始計算left和top的值 紅色(red)和藍色(blue)分別是absolute和relative他們都是從父對象開始計算left和top的值， 只是因為有一個是absolute所以產(chǎn)生了重疊效果，沒有被另外一個擠走。 --> </div> <div style="position:static;height:140px;width:140px;background:brown;left:220px;top:220px;"></div> <!--紫色(brown)的是static的，所以它的left和top沒有起作用，一直跑到最上面去了 同時我也明白了另外一個道理，因為默認的類型都是static，所以當我們的頁面長度等定位的不合理時一個會把一個擠走。 --> </body> </html> ?
有時候我們需要針對某一個容器的懸浮效果，而不是針對窗口的。這時候通過高度、寬度的計算不但麻煩，而且?guī)缀鯚o法完美實現(xiàn)效果。我一開始也無能為力，后來發(fā)現(xiàn)只要把其上一級的樣式屬性 position設(shè)置為relative就可以了。
也就是說，position的屬性值的效果，直接受其容器樣式中position屬性值影響。
例如如下A-B的嵌套結(jié)構(gòu)
<div id="A">
<div id="B">
</div>
</div>
??? 有時候我們需要針對某一個容器的懸浮效果,這時候通過高度、寬度的計算不但麻煩，而且?guī)缀鯚o法完美實現(xiàn)效果。只要把其上一級的樣式屬性 position設(shè)置為relative就可以了。
也就是說，position的屬性值的效果，直接受其容器樣式中position屬性值影響。
例如如下A-B的嵌套結(jié)構(gòu)
Java代碼 ?<div?id="A">? ?? <div?id="B">? ?? </div>? ?? </div>?? <div id="A"> <div id="B"> </div> </div>
??? 當A的position為relative時，B的position為absolute才有效。這時候left:0、top:0就不再針對窗口文檔，而是針對id為A的這個div了。
<img> 都有width屬性，如img.width 值沒有px 但style.width 是有px的，必須用parseInt去除，不然會報錯，當<img>定義了固定寬度時，可用var image = new Image();
image.src = img.src;得到原圖像的原大小
Java代碼 ?<html?>??? ?? <head>??? ?? <meta?http-equiv="content-type"?content="text/html"?charset="gb2312">??? ?? <style>?*{margin:0;padding:0}?</style>???? ?? </head>???? ?? <body>???? ?? ??? ?? <div?id="Canvas"?style="background-color:#cccccc;height:266px;width:284px">? ?? <table?id="Crop"?cellpadding="0"?cellspacing="0"?border="0"?style="border:?1px?solid?green">? ?? <tr>? ?? <td?style="height:?107px"?colspan="3"?class="Overlay"></td>? ?? </tr>? ?? <tr>? ?? <td?style="width:?105px"?class="Overlay"></td>? ?? <td?style="width:?90px;?height:?60px;?border-width:?1px;?border-style:?solid;?border-color:?white;"></td>? ?? <td?style="width:?105px"?class="Overlay"></td>? ?? </tr>? ?? <tr>? ?? <td?style="height:?107px"?colspan="3"?class="Overlay"></td>? ?? </tr>? ?? </table>? ?? ?? ?? <div?style="position:?relative;background-color:green;?left:0;?top:?0;?border:?1px?solid?red"?id="IconContainer">? ?? <img?id="icon"?src="1.gif"?style="border-width:?0px;?position:?relative;?left:?0px;?top:?0px">? ?? </div> ?? <div?style="position:?relative;background-color:red;?left:16;?top:16">fdsadsa</div>? ?? </div>? ?? ? ?? <script?type="text/javascript">? ?? <!--? ?? var?canva?=?document.getElementByIdx_x("Canvas");? ?? var???obj?=?document.getElementByIdx_x("icon");? ?? var?image?=?new?Image();? ?? image.src?=?obj.src;? ?? alert(canva.style.width)?//284 ?? alert(image.width)???????//28 ?? alert(obj.width);????????//28 ?? alert(obj.style.width);??// ?? obj.style.left?=?(parseInt(canva.style.width)?-?image.width?)/2?+?"px";? ?? obj.style.top?=?-(parseInt(canva.style.height)?+?image.height)/2?+?"px";? ?? //-->? ?? <!-- ?? 圖片居中，這類問題一般都是算兩者的width和height，再求left和top，都要求（最好放一起），position設(shè)為relative?,相對自己在父元素的原始位置的位移，向右下角移動為正? ?? --> ?? </script>? ?? ?? </body>???? ?? </html>??? posted on 2013-03-30 11:26 moonfans 閱讀(...) 評論(...) 編輯 收藏
position的四種取值 ：
??? static:static定位就是不定位，出現(xiàn)在哪里就顯示在哪里，這是默認取值，只有在你想覆蓋以前的定義時才需要顯示指定relative:relative 就是相對元素static定位時的位置進行偏移，如果指定static時top是50象素，那么指定relative并指定top是10象素時，元素實際top就是60象素了。
??? absolute:absolute絕對定位，直接指定top、left、right、bottom。有意思的是絕對定位也是“相對”的。它的坐標是相對其容器來說的。容器又是什么呢，容器就是離元素最近的一個定位好的“祖先”，定位好的意思就是其Position是absolute或fixed或relative。如果沒有這個容器，那就使用瀏覽器初始的，也就是body或者html元素。標準是說只需要指定left和right，width可以自動根據(jù)容器寬度計算出來，可惜ie不支持。
??? fixed:fixed才是真正的絕對定位，其位置永遠相對瀏覽器位置來計算。而且就算用戶滾動頁面，元素位置也能相對瀏覽器保持不變，也就是說永遠可以看到，這個做一些彩單的時候可以用。可惜的是ie還不支持
relative,absolute,fixed需要指定具體位置
??? relative,absolute,fixed如果不指定它的top,left等屬性，那么它的position實際上依然是static。使用了relative,absolute,fixed就必須指定具體的位置。
Java代碼 ?
有時候我們需要針對某一個容器的懸浮效果，而不是針對窗口的。這時候通過高度、寬度的計算不但麻煩，而且?guī)缀鯚o法完美實現(xiàn)效果。我一開始也無能為力，后來發(fā)現(xiàn)只要把其上一級的樣式屬性 position設(shè)置為relative就可以了。
也就是說，position的屬性值的效果，直接受其容器樣式中position屬性值影響。
例如如下A-B的嵌套結(jié)構(gòu)
<div id="A">
<div id="B">
</div>
</div>
??? 有時候我們需要針對某一個容器的懸浮效果,這時候通過高度、寬度的計算不但麻煩，而且?guī)缀鯚o法完美實現(xiàn)效果。只要把其上一級的樣式屬性 position設(shè)置為relative就可以了。
也就是說，position的屬性值的效果，直接受其容器樣式中position屬性值影響。
例如如下A-B的嵌套結(jié)構(gòu)
Java代碼 ?
??? 當A的position為relative時，B的position為absolute才有效。這時候left:0、top:0就不再針對窗口文檔，而是針對id為A的這個div了。
<img> 都有width屬性，如img.width 值沒有px 但style.width 是有px的，必須用parseInt去除，不然會報錯，當<img>定義了固定寬度時，可用var image = new Image();
image.src = img.src;得到原圖像的原大小
Java代碼 ?
轉(zhuǎn)載于:https://www.cnblogs.com/moonfans/archive/2013/03/30/2990181.html
總結(jié)
以上是生活随笔為你收集整理的CSS中position的几个属性值的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 怎么炖牛肉 享受美味的炖牛肉秘方？
- 下一篇： Hadoop源代码分析（四）