前端技術分享：Css定位

css眾多屬性中，定位position屬性，必須有姓名，而且占據了比較重要的地位，比如：二級，三級導航效果，鼠標懸停的一些動態效果，懸停欄，側邊導航欄定位效果等等都是需要定位實現的。

但是很多小伙伴，剛接觸定位的時候，理解上會有一些困惑，使用上容易出bug，那我們今天就來聊一下定位position屬性；

1、定位的歷史

W3C（萬維網聯盟）組織于1998年5月發布了CSS2版本，CSS2規范在很大程度上擴展了CSS1中的內容。它包括數十種新的屬性（和偽元素），以及現有屬性的很多附加值，其中就包括 定位屬性。

2、瀏覽器的支持

所有主流瀏覽器都支持 position 屬性。

3、position屬性的語法

position 屬性：規定元素的定位類型

屬性值：

static：默認值。沒有定位，元素出現在正常的流中。

relative：生成相對定位的元素，相對于其正常位置進行定位。

fixed: 生成絕對定位的元素，相對于瀏覽器窗口進行定位。

absolute: 生成絕對定位的元素，相對于 static 定位以外的第一個父元素進行定位。

sticky （css3中新增的屬性值）: 粘性定位，該定位基于用戶滾動的位置。

4、定位需要配合使用的屬性

left 屬性:規定元素的左邊緣偏移的大小。

right 屬性規定元素的右邊緣偏移的大小。

top 屬性規定元素的頂部邊緣偏移的大小。

bottom 屬性規定元素的底部邊緣偏移的大小。

以上屬性用于給元素定位設置坐標點的位置；

屬性值：

auto：默認值。通過瀏覽器計算左邊緣的位置。

%：設置以包含元素的百分比計的左邊位置。可使用負值。

length：使用 px、cm 等單位設置元素的左邊位置。可使用負值。

5、了解編程中的坐標

編程中的坐標，x軸-水平軸右為正，左為負，Y軸-垂直軸下為正，上為負

每個元素都自帶一個坐標系，元素左上角的位置為原點（0）位置，如下圖所示

6、分別介紹定位屬性每個屬性值的使用語法

position:static 靜態定位

position屬性的默認值，即沒有定位，遵循正常的文檔流對象。

遵循正常的文檔流對象，可以理解為，元素的位置根據在html中的書寫順序依次排序顯示，沒有特殊的位置改變

position:relative 相對定位

生成相對定位的元素，相對于其正常位置進行定位。

基本使用講解：

例如：一個img元素在沒有設置定位時，正常顯示在瀏覽器中，自帶坐標系，

如圖顯示；

給img元素設置相對定位，設置定位的坐標為（100px,100px），美女的位置會從原本原點的位置移動到（100px,100px）的位置，會發生如下變化：

代碼實現如下：

 html： <img src="timg.jpg" alt="" />
 css ： img {
   // img元素進行相對定位
   position: relative;
  // 定位的坐標（相對于自身位置左邊100px，相對于自身位置上面100px的位置定位）
   left: 100px;
   top: 100px;
 }

相對定位對元素在文檔流中的影響

元素仍然保持其未定位前的形狀，它原本在文本流中所占的空間仍保留

例如：在img標簽下面書寫一個span標簽，img在定位之后，原本的位置空間依舊是保留在文本流中的，寫在img下面的span是沒有上去的；

代碼實現如下：

<img src="timg.jpg" alt="" />
<span>~~~~~~~我是寫在img下面的文本亞~~~~~~~~</span>
 css ： img {
   // img元素進行相對定位
    position: relative;
  // 定位的坐標（相對于自身位置左邊100px，相對于自身位置上面100px的位置定位）
    left: 100px;
    top: 100px;
 }
  span {
    background: lemonchiffon
 }

效果如下：

position: absolute 絕對定位

生成絕對定位的元素，相對于static定位以外的第一個父元素進行定位。

解釋：指絕對定位元素會根據有定位設置（除static定位）的父元素作為參照進行定位；如果父元素沒有定位設置，那就繼續向上找祖父元素，看是否有定位設置，有的話就根據祖父元素定位，沒有的話，那就繼續向上找…….如果都沒有，就根據html進行定位。

包含塊：絕對定位元素參照的有定位設置的父元素我們稱為包含塊，包含塊是絕對定位的基礎，包含塊就是為絕對定位元素提供坐標偏移和顯示范圍的參照物；

設置某個元素為包含塊：給此元素添加relative，fixed，absolute都可，推薦使用relative，因為不會影響元素在文本流中的顯示；

總結元素絕對定位三部曲：

先確定其包含塊
設置元素絕對定位
定位的位置

基本使用講解：

例如：img元素放在div中，沒有設置定位效果

代碼實現如下：

HTML:

<!DOCTYPE html>
<html lang="en">
   <head> </head>
   <body>
      <div>
        <img src="../img/timg.jpg" alt="" />
      </div>
   </body>
</html>

CSS：

div {
   width: 400px;
   height: 400px;
   border: 10px dashed coral;
   margin: 100px;
}

顯示效果如下：

然后給圖片設置絕對定位，代碼如下：

img {
    position: absolute;
    left: 0;
    top: 0;
}

分析：img的父元素是div，從上述代碼中，可以看出div沒有定位設置，不能作為img的包含塊，一依次向上是body，body也沒有定位設置，再向上就是html，所以img會根據html進行定位，定位到離包含塊左邊0，上邊0的位置定位，也就是左上角位置；

效果如下：

如果想讓img根據div盒子進行定位，div需要有除static之外的定位設置；成為一個包含塊，代碼如下：

  div {
    width: 400px;
    height: 400px;
    border: 10px dashed coral;
    margin: 100px;
    /* position:absolute relative fixed都可以讓一個元素成為包含塊 */
    position: absolute;
 }
 img {
    position: absolute;
    left: 100px;
    top: 100px;
 }

效果如下：

絕對定位對元素在文檔流中的影響

給元素設置絕對定位之后，元素原先在正常文檔流中所占的空間會關閉，就好像該元素原來不存在一樣；

例如：在img下面添加了一個p標簽，并且沒有給img設置絕對定位，此時img和p會根據書寫順序，從上向下依次顯示，代碼如下：

Html：

<div>
    <img src="../img/timg.jpg" alt="" />
    <p>
        ~~~~~~我是寫在img下面的span呀~~~~~~
    </p>
</div>

Css：

* {
    margin: 0;
    padding: 0;
 }
div {
    width: 400px;
    height: 400px;
    border: 10px dashed coral;
    margin: 100px;
 }
p {
    background: lemonchiffon;
 }

效果如下：

當給img設置絕對定位之后，img在正常文檔流中所占的空間會關閉，img不在占據原來的空間；p標簽就會當img不存在一樣，顯示在div最開始的位置：

代碼如下：

Html：

<div>
    <img src="../img/timg.jpg" alt="" />
    <p>
         ~~~~~~我是寫在img下面的span呀~~~~~~
    </p>
</div>

Css：

* {
    margin: 0;
    padding: 0;
 }
 div {
    width: 400px;
    height: 400px;
    border: 10px dashed coral;
    margin: 100px;
    /* position:absolute relative fixed都可以讓一個元素成為包含塊 */
    position: relative;
 }
 img {
    position: absolute;
    left: 100px;
    top: 100px;
 }
 p {
    background: lemonchiffon;
 }

效果如下：

固定定位 position:fixed

生成固定定位的元素，相對于瀏覽器窗口進行定位。

基本使用講解

元素設置固定定位之后，相對窗口進行定位，不會根據瀏覽器滾動條的滾動而移動位置，代碼如下：

結構：內容比較多,讓瀏覽器可以出現滾動條

<body>
	我是讓當前瀏覽器產生滾動條的文本1
	<br /><br /><br /><br /><br />
	我是讓當前瀏覽器產生滾動條的文本2
	<br /><br /><br /><br /><br />
	我是讓當前瀏覽器產生滾動條的文本3
	<br /><br /><br /><br /><br />
	<img src="../img/timg.jpg" alt="" />
	<br />
	我是讓當前瀏覽器產生滾動條的文本4
	<br /><br /><br /><br /><br />
	我是讓當前瀏覽器產生滾動條的文本5
	<br /><br /><br /><br /><br />
	我是讓當前瀏覽器產生滾動條的文本6
	<br /><br /><br /><br /><br />
	我是讓當前瀏覽器產生滾動條的文本7
	<br /><br /><br /><br /><br />
</body>

效果如下：

給圖片添加固定定位；代碼如下：

<style>
    img {
    position: fixed;
    right: 0;
    top: 30%;
    }
</style>

效果如下：

固定定位對元素在文檔流中的影響

給元素設置固定定位之后，元素原先在正常文檔流中所占的空間會關閉，就好像該元素原來不存在一樣（參照上圖看效果）；

sticky 粘性定位

css3中新增的屬性值，有兼容問題，ie低版本瀏覽器不支持

粘性定位，元素在瀏覽器范圍內定位時就像 position:relative; 而當頁面滾動超出目標區域時，它的定位效果就像 position:fixed;，它會固定在目標位置。

基本語法講解

例如：給img元素設置粘性定位，代碼如下：

Html結構：

<body>
	我是讓當前瀏覽器產生滾動條的文本1
	<br /><br /><br /><br /><br />
	我是讓當前瀏覽器產生滾動條的文本2
	<br /><br /><br /><br /><br />
	我是讓當前瀏覽器產生滾動條的文本3
	<br /><br /><br /><br /><br />
	<img src="../img/timg.jpg" alt="" />
	<br />
	我是讓當前瀏覽器產生滾動條的文本4
	<br /><br /><br /><br /><br />
	我是讓當前瀏覽器產生滾動條的文本5
	<br /><br /><br /><br /><br />
	我是讓當前瀏覽器產生滾動條的文本6
	<br /><br /><br /><br /><br />
	我是讓當前瀏覽器產生滾動條的文本7
	<br /><br /><br /><br /><br />
	我是讓當前瀏覽器產生滾動條的文本8
	<br /><br /><br /><br /><br />
	我是讓當前瀏覽器產生滾動條的文本9
	<br /><br /><br /><br /><br />
	我是讓當前瀏覽器產生滾動條的文本10
	<br /><br /><br /><br /><br />
	我是讓當前瀏覽器產生滾動條的文本11
	<br /><br /><br /><br /><br />
</body>

css代碼：

<style>
   img {
       position: sticky;
       left: 300px;
       top: 100px;
 }
 </style>

效果如下：

元素設置絕對定位、固定定位后，會生成一個塊級框，而不論原來它在正常流中生成何種類型的框。

例如： span默認為行內元素，給其設置絕對定位，觀察其生成的塊級框效果，代碼如下：

Html：

<span>我是測試絕對定位對元素類型影響的小可愛</span>

Css：

<style>
 span {
     position: absolute;
     width: 300px;
     height: 300px;
     background: lightblue;
     font-size: 30px;
     border: lightcoral 10px dashed;
 }
 </style>

效果如下：

以上是對position屬性語法的基本講解，其實position在實際開發中，有很多靈活的使用方式，下次我們寫一個比較有趣的案例，給大家展示定位在實際項目中的靈活應用。

者：帥昆

想必大家手里都有一堆照片，數碼的、膠片的……

大部分時間……這些照片都沉睡在抽屜里、硬盤里……其實常常翻的可能就是手機的相冊。

但是如果把這些照片導入手機相冊，只能看到模糊的一團，可能沒有時間、地點，串不起回憶

辛辛苦苦尋尋覓覓，終于找到了成套的解決方案……給這些老照片注入時間、地點，導入手機后看著時間線和地圖上自己走過的一個個標記，它們有了生命，拼起了承載的記憶碎片……話不多說，跟著我一步步做吧

先展示下本文用作示例的照片……30多年前英俊瀟灑的我

照片是掃描的，信息少如渣

一、下載安裝軟件：geosetter

http://www.appinn.com/geosetter/

二、打開“百度地圖-坐標拾取系統”

http://api.map.baidu.com/lbsapi/getpoint/index.html

三、開始操作（一）通過軟件打開需要編輯信息的照片

（二）先添加時間

這個照片是我百天幾年，日子很好算進入照片編輯——注意，多張照片可以同時選中后右鍵一同編輯。

輸入你確定的日期……年紀大了，翻都翻半天還是直接輸入吧。如果不是很確定，就大概估計一個好了。

填好點擊確定。

（三）添加GPS信息。還是右鍵進入編輯模式，選擇“地點選項卡”。

（四）打開“百度地圖-坐標拾取系統”，找到你需要的地點。

（五）粘貼GPS信息

注意，百度出來的順序跟軟件是反的，注意粘貼順序……除非你想免費“出國”

編輯好后，一定要記得點擊“保存改變”！！！！！！！！

然后右鍵選擇在地圖中顯示，就可以看到照片在地圖中顯示了……如果你的地圖是一片空白……請自己想辦法替換hosts

有偏差……那必須的啊，這也是為了在相機里面盡可能顯示的準確，我們在前面用百度地圖抓坐標的原因……

四、拷貝入手機

（一）安卓手機

建議使用“namexif"把照片名稱自動修正為跟手機拍攝的照片命名方式一致，這樣拷貝進去以后連接電腦編輯的時候也容易找到。這個軟件很厲害，可以批量根據照片信息自動命名哦

（二）蘋果手機我用的是”iTools“導入。具體使用方法軟件說的很詳細，這里不廢話了。

五、效果驗證……

箭頭起于原始，終于編輯后。

這要是打開……那非炫倒一大片

與設定位置均存在一定的偏差……差不多就行了唄

實際操作發現，不管是用谷歌地圖、百度地圖、搜狗地圖確定的經緯度編輯進照片再導入手機，在手機相冊內顯示均與預定地點存在偏差啊……具體這個怎么修正看看有沒有高人給出解決方案，我是嘗試了多次，這里提供一個參考開拓思路：http://blog.sina.com.cn/s/blog_80a9926b0101ktoa.html

最后，再推薦一個App……因為蘋果相冊，地點顯示只能按照年度顯示，不能一下全部顯示你去過的地方。這個App可以解決。（安卓機好像不存在這個問題，至少我手里的mate7可以顯示所有有GPS信息的照片在地圖上的標注）

要注意的是，最好每個地點選幾張照片出來放到單獨的相冊，再用app只讀取這個相冊內的照片。因為如果你手機照片太多，直接讀取手機相冊app可能會黑屏重啟……就這個問題也咨詢了官方，官方也給出了具體的意見。

好了，介紹完了，希望對大家有所幫助。

~謝謝觀賞~

天學會html+css，第九天固定定位。

Redmi手機電視筆記本。

今天的學習目標是右側懸浮工具欄用固定定位實現，它是相對于瀏覽器窗口的定位方式。

·盒子里的內容用a標簽，一個圖片加一行文字，此時它的位置在最底部。

·然后給它寫上固定定位樣式，右側距離0，下面距離70像素，加上背景顏色，看下效果。

·開始給a標簽寫樣式，固定寬高，text-renderin默認下劃線去掉，里面內容居中，看下效果。

·圖片寫樣式之前也要加上這行代碼，然后讓它的尺寸變小一點，并且左右居中，看下效果。

·文字的顏色、大小也調整一下。

·最后給a標簽加上邊框、內邊距，讓里面內容往下挪一挪。

到此，今天的學習完成。

在線咨詢

上一篇：3種方法（div法、css法、js法）制作html的旋轉太極圖
下一篇：JSP中四種傳遞參數的方法（個人總結，簡單實用）

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

前端技術分享：Css定位

1、定位的歷史

2、瀏覽器的支持

3、position屬性的語法

4、定位需要配合使用的屬性

5、了解編程中的坐標

6、 分別介紹定位屬性每個屬性值的使用語法

相對定位對元素在文檔流中的影響

基本使用講解：

絕對定位對元素在文檔流中的影響

基本使用講解

固定定位對元素在文檔流中的影響

基本語法講解

元素設置絕對定位、固定定位后，會生成一個塊級框，而不論原來它在正常流中生成何種類型的框。

您的項目需求

6、分別介紹定位屬性每個屬性值的使用語法