深究CSS定位position的常用技法

本文針對CSS常用的6個屬性進(jìn)行探究,大家一定會對這篇文章滿意的。
1.position:static
static屬性是position的默認(rèn)值,也就是說,當(dāng)一個元素沒有為其設(shè)定position屬性時,它的默認(rèn)值就是static。
2.position:absolute
這是一個經(jīng)常會被用到的position屬性值。如果為某個元素設(shè)定了absolute,則該元素脫離原來的文檔流。形象一些說,比如a元素被定義了position:absolute,那么這個元素就不會與這個頁面中的其他元素發(fā)生位置上的關(guān)系,而是凌駕于整個頁面之上的漂浮狀態(tài)。頁面中的其他元素的位置變化、大小變化等,都不會影響a元素的位置,相當(dāng)于一個局外人。
3.position:relative
relative是最有用的定義方法。設(shè)置了relative屬性表示,該元素相對于自己原來位置發(fā)生的變化。比如,我們定義了一個b元素,給它設(shè)定如下css樣式:
- #b{
- position: relative;
- width:100px;
- height:100px;
- top:100px;
- }
該段代碼定義的b元素,它的位置為相對于沒有定義position屬性的位置向下移動100px的距離。relative屬性值的定義就是這樣的定位模式。
4.position:fixed
fixed定位用的不多,但是它非常適用于固定模式的部分制作,比如頂部菜單。定義了fixed屬性后,元素的位置不會隨著任何行為發(fā)生變化。
5.relative+position
同時使用這兩個定位,是一種很常用的手法,新手也可能會在此處遇見很多麻煩??傮w來說,如果一個元素絕對定位后,其參照物是以離自身最近元素是否設(shè)置了相對定位,如果有設(shè)置將以離自己最近元素定位,如果沒有將往其祖先元素尋找相對定位元素,一直找到html為止。比如,下面的代碼利用二者的結(jié)合實(shí)現(xiàn)了一個兩列布局;
- <span style="white-space:pre"> </span>#div-1 {
- position:relative;
- }
- #div-1a {
- position:absolute;
- top:0;
- rightright:0;
- width:200px;
- }
- #div-1b {
- position:absolute;
- top:0;
- left:0;
- width:200px;
- }
內(nèi)部的兩個子div會根據(jù)其外部定位為relative的元素為參照進(jìn)行絕對定位。
6.clear:both清除浮動
有的時候定位會出現(xiàn)塌陷現(xiàn)象,即子元素在父元素中,但是父元素的大小不會隨著子元素的大小而被“”撐開“,導(dǎo)致了父元素的塌陷效果。這種bug的出現(xiàn)是由于子元素設(shè)定了 float屬性,導(dǎo)致父元素的坍塌。要想解決這種bug,需要為父元素設(shè)定清除浮動。示例代碼如下:
- <span style="white-space:pre"> </span> #div-1a {
- float:left;
- width:190px;
- }
- #div-1b {
- float:left;
- width:190px;
- }
- #div-1c {
- clear:both;
- }
以上就是關(guān)于CSS定位中常用的六個屬性學(xué)習(xí),希望對大家的學(xué)習(xí)有所幫助。
相關(guān)文章
- 本文針對CSS浮動float、定位position進(jìn)行學(xué)習(xí)理解,通過實(shí)例幫助大家掌握CSS浮動float、定位position技巧,感興趣的小伙伴們可以參考一下2016-04-21
- 這篇文章主要介紹了CSS的position屬性的完全解析,包括position和overflow在一些相似使用方面的對比,需要的朋友可以參考下2015-11-06
- 這篇文章主要介紹了舉例詳解CSS中position屬性的使用,是CSS入門學(xué)習(xí)中的基礎(chǔ)知識,需要的朋友可以參考下2015-09-06
- positon有4個屬性:static relative absolute fixed,我們都知道absolute是絕對定位,relative是相對定位,但是這個絕對與相對是什么意思呢?絕對是什么地方的絕對,相對又2014-11-28
- 對于Position、Float我們在平時使用上可以說是使用頻率非常高的兩個CSS屬性,對于這兩個屬性的使用上面可能大多數(shù)人存在一些模糊與不清晰的地方。本文主要對這兩個屬性使用2014-06-14
- position屬性主要有四種屬性值,任何元素的默認(rèn)position的屬性值均是static,靜態(tài)。這節(jié)課主要講講relative以及absolute,感興趣的朋友可以了解下2013-12-09
css中關(guān)于定位屬性position為fixed的使用記載
當(dāng)一個div想要定位時,我們第一反應(yīng)是position屬性,而position屬性除了默認(rèn)值外,還有absolute,relative和fixed,下面有個不錯的示例,不懂的朋友可以參考下2013-11-11CSS中的position:relative;的作用示例介紹
CSS中的position:relative是控制元素相對定位的,relative 不脫離文檔流而absolute 脫離文檔流,relative 的元素盡管表面上看到它偏離了原來的位置,但它實(shí)際上在文檔流中2013-11-05css background-position 用法詳細(xì)圖文介紹
css background-position背景定位屬性想必從事前端開發(fā)的朋友并不陌生吧,這個屬性很實(shí)用的利用它可以實(shí)現(xiàn)很多的圖片樣式效果,下面是其具體的使用方法,感興趣的朋友不要2013-11-04- POSITION屬性用來決定元素在頁面上的位置,其定位屬性有多個,下面一一為大家介紹下,希望大家在使用過程中可以用到2013-09-09