欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

深究CSS定位position的常用技法

  發(fā)布時間：2016-04-26 10:14:01   作者：佚名   我要評論
這篇文章主要針對CSS定位position的常用技法進(jìn)行探究，CSS中的position等屬性確實(shí)有很多需要認(rèn)真考究的地方，本文就和大家一起探索一下

本文針對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樣式：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. #b{     
  2.     position: relative;     
  3.     width:100px;     
  4.     height:100px;     
  5.     top:100px;     
  6. }     

該段代碼定義的b元素，它的位置為相對于沒有定義position屬性的位置向下移動100px的距離。relative屬性值的定義就是這樣的定位模式。

4.position:fixed

fixed定位用的不多，但是它非常適用于固定模式的部分制作，比如頂部菜單。定義了fixed屬性后，元素的位置不會隨著任何行為發(fā)生變化。

5.relative+position

同時使用這兩個定位，是一種很常用的手法，新手也可能會在此處遇見很多麻煩?？傮w來說，如果一個元素絕對定位后，其參照物是以離自身最近元素是否設(shè)置了相對定位，如果有設(shè)置將以離自己最近元素定位，如果沒有將往其祖先元素尋找相對定位元素，一直找到html為止。比如，下面的代碼利用二者的結(jié)合實(shí)現(xiàn)了一個兩列布局;

CSS Code復(fù)制內(nèi)容到剪貼板
  1. <span style="white-space:pre">    </span>#div-1 {     
  2.              position:relative;     
  3.             }     
  4.             #div-1a {     
  5.              position:absolute;     
  6.              top:0;     
  7.              rightright:0;     
  8.              width:200px;     
  9.             }     
  10.             #div-1b {     
  11.              position:absolute;     
  12.              top:0;     
  13.              left:0;     
  14.              width:200px;     
  15.             }     

內(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è)定清除浮動。示例代碼如下：

CSS Code復(fù)制內(nèi)容到剪貼板
  1. <span style="white-space:pre">    </span>    #div-1a {     
  2.              float:left;     
  3.              width:190px;     
  4.             }     
  5.             #div-1b {     
  6.              float:left;     
  7.              width:190px;     
  8.             }     
  9.             #div-1c {     
  10.              clear:both;     
  11.             }     

以上就是關(guān)于CSS定位中常用的六個屬性學(xué)習(xí)，希望對大家的學(xué)習(xí)有所幫助。

相關(guān)文章

  • 理解CSS浮動float、定位position

    本文針對CSS浮動float、定位position進(jìn)行學(xué)習(xí)理解，通過實(shí)例幫助大家掌握CSS浮動float、定位position技巧，感興趣的小伙伴們可以參考一下
    2016-04-21

  • CSS的position屬性完全解析

    這篇文章主要介紹了CSS的position屬性的完全解析,包括position和overflow在一些相似使用方面的對比,需要的朋友可以參考下
    2015-11-06

  • 舉例詳解CSS中position屬性的使用

    這篇文章主要介紹了舉例詳解CSS中position屬性的使用,是CSS入門學(xué)習(xí)中的基礎(chǔ)知識,需要的朋友可以參考下
    2015-09-06

  • css中position屬性使用詳解

    positon有4個屬性:static relative absolute fixed，我們都知道absolute是絕對定位，relative是相對定位，但是這個絕對與相對是什么意思呢？絕對是什么地方的絕對，相對又
    2014-11-28

  • 對CSS中的Position、Float屬性的一些深入探討

    對于Position、Float我們在平時使用上可以說是使用頻率非常高的兩個CSS屬性，對于這兩個屬性的使用上面可能大多數(shù)人存在一些模糊與不清晰的地方。本文主要對這兩個屬性使用
    2014-06-14

  • DIV CSS布局中position屬性用法深入探究

    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-11

  • CSS中的position:relative;的作用示例介紹

    CSS中的position:relative是控制元素相對定位的，relative 不脫離文檔流而absolute 脫離文檔流，relative 的元素盡管表面上看到它偏離了原來的位置，但它實(shí)際上在文檔流中
    2013-11-05

  • css background-position 用法詳細(xì)圖文介紹

    css background-position背景定位屬性想必從事前端開發(fā)的朋友并不陌生吧，這個屬性很實(shí)用的利用它可以實(shí)現(xiàn)很多的圖片樣式效果，下面是其具體的使用方法，感興趣的朋友不要
    2013-11-04

  • 簡明CSS定位屬性position

    POSITION屬性用來決定元素在頁面上的位置，其定位屬性有多個，下面一一為大家介紹下，希望大家在使用過程中可以用到
    2013-09-09

最新評論