css-定位

定位:position,當(dāng)值為relative時可以設(shè)置left和right偏移量。

position 屬性值的含義:

static
元素框正常生成。塊級元素生成一個矩形框艇潭,作為文檔流的一部分,行內(nèi)元素則會創(chuàng)建一個或多個行框戏蔑,置于其父元素中蹋凝。
relative
元素框偏移某個距離。元素仍保持其未定位前的形狀总棵,它原本所占的空間仍保留鳍寂。
absolute
元素框從文檔流完全刪除,并相對于其包含塊定位情龄。包含塊可能是文檔中的另一個元素或者是初始包含塊迄汛。元素原先在正常文檔流中所占的空間會關(guān)閉,就好像元素原來不存在一樣骤视。元素定位后生成一個塊級框隔心,而不論原來它在正常流中生成何種類型的框。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>定位</title>
    <style type="text/css">
        .box1{
            width: 100px;
            height: 100px;
            background-color: gold;
            position:relative;
            left: 100px; 
        }
        .box2{
            width: 100px;
            height: 100px;
            background-color: yellow;
        }
        .box3{
            width: 100px;
            height: 100px;
            background-color: green;
            position:relative;
            left: 100px;   
        } 
        .box4{
            width: 100px;
            height: 100px;
            background-color: green;
            position:relative;
            left: 200px;                       
        }
        /*相對定位不會影響文檔流*/
    </style>
</head>
<body>
    <div class="box1"></div>
    <div class="box2">
        
            <div class="box4"></div>
    </div>
    <div class="box3"></div>

</body>
</html>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末尚胞,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子帜慢,更是在濱河造成了極大的恐慌笼裳,老刑警劉巖,帶你破解...
    沈念sama閱讀 219,589評論 6 508
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件粱玲,死亡現(xiàn)場離奇詭異躬柬,居然都是意外死亡,警方通過查閱死者的電腦和手機抽减,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,615評論 3 396
  • 文/潘曉璐 我一進(jìn)店門允青,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人卵沉,你說我怎么就攤上這事颠锉》ㄉ” “怎么了?”我有些...
    開封第一講書人閱讀 165,933評論 0 356
  • 文/不壞的土叔 我叫張陵琼掠,是天一觀的道長拒垃。 經(jīng)常有香客問我,道長瓷蛙,這世上最難降的妖魔是什么悼瓮? 我笑而不...
    開封第一講書人閱讀 58,976評論 1 295
  • 正文 為了忘掉前任,我火速辦了婚禮艰猬,結(jié)果婚禮上横堡,老公的妹妹穿的比我還像新娘。我一直安慰自己冠桃,他們只是感情好命贴,可當(dāng)我...
    茶點故事閱讀 67,999評論 6 393
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著腊满,像睡著了一般套么。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上碳蛋,一...
    開封第一講書人閱讀 51,775評論 1 307
  • 那天胚泌,我揣著相機與錄音,去河邊找鬼肃弟。 笑死玷室,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的笤受。 我是一名探鬼主播穷缤,決...
    沈念sama閱讀 40,474評論 3 420
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼箩兽!你這毒婦竟也來了津肛?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,359評論 0 276
  • 序言:老撾萬榮一對情侶失蹤汗贫,失蹤者是張志新(化名)和其女友劉穎身坐,沒想到半個月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體落包,經(jīng)...
    沈念sama閱讀 45,854評論 1 317
  • 正文 獨居荒郊野嶺守林人離奇死亡部蛇,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 38,007評論 3 338
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了咐蝇。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片涯鲁。...
    茶點故事閱讀 40,146評論 1 351
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出抹腿,到底是詐尸還是另有隱情岛请,我是刑警寧澤,帶...
    沈念sama閱讀 35,826評論 5 346
  • 正文 年R本政府宣布幢踏,位于F島的核電站髓需,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏房蝉。R本人自食惡果不足惜僚匆,卻給世界環(huán)境...
    茶點故事閱讀 41,484評論 3 331
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望搭幻。 院中可真熱鬧咧擂,春花似錦、人聲如沸檀蹋。這莊子的主人今日做“春日...
    開封第一講書人閱讀 32,029評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽俯逾。三九已至贸桶,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間桌肴,已是汗流浹背皇筛。 一陣腳步聲響...
    開封第一講書人閱讀 33,153評論 1 272
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留坠七,地道東北人水醋。 一個月前我還...
    沈念sama閱讀 48,420評論 3 373
  • 正文 我出身青樓,卻偏偏與公主長得像彪置,于是被迫代替她去往敵國和親拄踪。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 45,107評論 2 356

推薦閱讀更多精彩內(nèi)容

  • CSS 定位 CSS有三種基本的定位機制:普通流,浮動潘懊,絕對定位(absolute, fixed):普通流是默認(rèn)定...
    _空空閱讀 5,742評論 0 15
  • 在CSS中關(guān)于定位的內(nèi)容是:position:relative | absolute | static | fix...
    feelinghappy618閱讀 637評論 0 0
  • CSS定位(Positioning) 含義: CSS定位屬性允許你對元素進(jìn)行定位定位的基本思想耀盗,它允許你定義元素框...
    蔚來天空閱讀 296評論 0 0
  • CSS定位(Positioning) 含義: CSS定位屬性允許你對元素進(jìn)行定位定位的基本思想,它允許你定義元素框...
    幸而0407閱讀 262評論 0 1
  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案卦尊? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補...
    _Yfling閱讀 13,754評論 1 92