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

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

伯樂在線   發(fā)布時(shí)間：2015-09-06 17:39:31   作者：佚名   我要評論
這篇文章主要介紹了舉例詳解CSS中position屬性的使用,是CSS入門學(xué)習(xí)中的基礎(chǔ)知識,需要的朋友可以參考下

position 這個(gè)屬性決定了元素將如何定位。它的值大概有以下五種：

每個(gè)網(wǎng)頁都可以看成是由一層一層頁面堆疊起來的，如下圖所示。

position 設(shè)置為 relative 的時(shí)候，元素依然在普通流中，位置是正常位置，你可以通過 left right 等移動(dòng)元素。會(huì)影響其他元素的位置。

而當(dāng)一個(gè)元素的 position 值為 absolute 或 fixed 的時(shí)候，會(huì)發(fā)生三件事：

把該元素往 Z 軸方向移了一層，元素脫離了普通流，所以不再占據(jù)原來那層的空間，還會(huì)覆蓋下層的元素。
該元素將變?yōu)閴K級元素，相當(dāng)于給該元素設(shè)置了 display: block;（給一個(gè)內(nèi)聯(lián)元素，如 <span> ，設(shè)置 absolute 之后發(fā)現(xiàn)它可以設(shè)置寬高了）。
如果該元素是塊級元素，元素的寬度由原來的 width: 100%（占據(jù)一行），變?yōu)榱?auto。
由此觀之，當(dāng) position 設(shè)置為 absolute 或 fixed，就沒必要設(shè)置 display 為 block 了。而且如果你不想覆蓋下層的元素，可以設(shè)置 z-index 值 達(dá)到效果。

下面來看一下插件的參數(shù)用法示例：

1. position:static

所有元素的默認(rèn)定位都是：position:static，這意味著元素沒有被定位，而且在文檔中出現(xiàn)在它應(yīng)該在的位置。

一般來說，不用指定 position:static，除非想要覆蓋之前設(shè)置的定位。

CSS Code復(fù)制內(nèi)容到剪貼板
  1. #div-1 {   
  2.  position:static;   
  3. }  

2. position:relative

如果設(shè)定 position:relative，就可以使用 top,bottom,left 和 right 來相對于元素在文檔中應(yīng)該出現(xiàn)的位置來移動(dòng)這個(gè)元素?！疽馑际窃貙?shí)際上依然占據(jù)文檔中的原有位置，只是視覺上相對于它在文檔中的原有位置移動(dòng)了】

CSS Code復(fù)制內(nèi)容到剪貼板
  1. #div-1 {   
  2.  position:relative;   
  3.  top:20px;   
  4.  left:-40px;   
  5. }  

3. position:absolute

當(dāng)指定 position:absolute 時(shí)，元素就脫離了文檔【即在文檔中已經(jīng)不占據(jù)位置了】，可以準(zhǔn)確的按照設(shè)置的 top,bottom,left 和 right 來定位了。

CSS Code復(fù)制內(nèi)容到剪貼板
  1. #div-1a {   
  2.  position:absolute;   
  3.  top:0;   
  4.  rightright:0;   
  5.  width:200px;   
  6. }  

4. position:relative + position:absolute

如果我們給 div-1 設(shè)置 relative 定位，那么 div-1 內(nèi)的所有元素都會(huì)相對 div-1 定位。如果給 div-1a 設(shè)置 absolute 定位，就可以把 div-1a 移動(dòng)到 div-1 的右上方。

CSS Code復(fù)制內(nèi)容到剪貼板
  1. #div-1 {   
  2.  position:relative;   
  3. }   
  4. #div-1a {   
  5.  position:absolute;   
  6.  top:0;   
  7.  rightright:0;   
  8.  width:200px;   
  9. }  

5. 兩欄絕對定位

現(xiàn)在就可以使用相對定位和絕對定位來做一個(gè)兩欄布局了。

CSS Code復(fù)制內(nèi)容到剪貼板
  1. #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. }  

6. 兩欄絕對定位定高

一種方案是給元素設(shè)定固定高度。但這種方案對大多數(shù)設(shè)計(jì)來說不太適合，因?yàn)橐话阄覀儾恢涝刂袝?huì)有多少文本，或者將要使用的精確的字號。

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

相關(guān)文章

  • 深究CSS定位position的常用技法

    這篇文章主要針對CSS定位position的常用技法進(jìn)行探究，CSS中的position等屬性確實(shí)有很多需要認(rèn)真考究的地方，本文就和大家一起探索一下
    2016-04-26

  • 理解CSS浮動(dòng)float、定位position

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

  • CSS的position屬性完全解析

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

  • css中position屬性使用詳解

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

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

    對于Position、Float我們在平時(shí)使用上可以說是使用頻率非常高的兩個(gè)CSS屬性，對于這兩個(gè)屬性的使用上面可能大多數(shù)人存在一些模糊與不清晰的地方。本文主要對這兩個(gè)屬性使用
    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)一個(gè)div想要定位時(shí)，我們第一反應(yīng)是position屬性，而position屬性除了默認(rèn)值外，還有absolute,relative和fixed，下面有個(gè)不錯(cuò)的示例，不懂的朋友可以參考下
    2013-11-11

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

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

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

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

  • 簡明CSS定位屬性position

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

最新評論