CSS 佈局的position屬性、float屬性

時間 2019-11-24

標籤 css 佈局 position 屬性 float 欄目 CSS 简体版

原文原文鏈接

CSS 佈局通常是後寫的帶有定位屬性的元素層級大於先寫的（或者沒有設置的）定位屬性層級，後者會覆蓋在前者上層。html

position屬性

position屬性指定一個元素（默認靜態的，能夠有相對，絕對或固定）的定位方法的類型。默認值static：沒有定位，元素出如今正常的流中（忽略 top, bottom, left, right 或者 z-index 聲明）。bash

position:relative

生成相對定位的元素，相對於其正常位置（就是元素本身原本的位置）進行定位。在文檔流中仍然佔有空間，其參考對象是離該元素最近的父元素。所以，樣式佈局

position:relative;
left:20px;
複製代碼

向元素的原始左側位置增長 20像素（元素髮生的右移20像素）。spa

position:relative;
left:-20px;
複製代碼

從元素的原始左側位置減去 20 像素（元素髮生的左移20像素）。
同理元素的top, bottom, right位置屬性同樣存在這樣的原理。code

假設元素是在左上角（0，0）位置，（此處位置座標只是舉例說明，不表明真實座標）
設置left:20px;此時向右爲x軸正方向，元素相對原點（0，0）向右移動20像素；
設置right:20px;此時向左爲x軸正方向，元素相對原點（0，0）向左移動20像素，此時元素是不顯示在屏幕上，位置是屏幕外的；
設置top:20px;此時向下爲y軸正方向，元素相對原點（0，0）向下移動20像素；
設置bottom:20px;此時向上爲y軸正方向，元素相對原點（0，0）向上移動20像素，此時元素是不顯示在屏幕上，位置是屏幕外的；htm

position:absolute

生成絕對定位的元素，相對於 static 定位之外的第一個父元素進行定位，脫離文檔流。絕對定位的元素的位置相對於最近的已定位父元素，若是元素沒有已定位的父元素，那麼它的位置相對於<html>。若是設置了position:absolute，而不設置"left", "top", "right"，"bottom"屬性，也是沒有脫離文檔流的。元素的位置經過 "left", "top", "right" 以及 "bottom"屬性進行規定。
注意：absolute 定位使元素的位置與文檔流無關，所以不佔據空間。
absolute 定位的元素和其餘元素重疊。對象

絕對定位是相對窗口的四個頂點爲原點的，在<body>下的<div>設置如下屬性文檔

position:absolute;
left:100px;
top:150px;
複製代碼

相對左上角，距離窗口左邊100 px和距離窗口頂部150 px。it

position:absolute;
right:100px;
bottom:150px;
複製代碼

相對右下角，距離窗口右邊100 px和距離窗口底部150 px。想相對父元素設置相對定位，父元素也必須設置定位屬性。

position:fixed

生成固定定位的元素，相對於瀏覽器窗口進行定位。元素的位置相對於瀏覽器窗口是固定位置，脫離文檔流。即便窗口是滾動的它也不會移動。元素的位置經過 "left", "top", "right" 以及 "bottom" 屬性進行規定。
固定定位也是相對窗口的四個頂點爲原點的，與絕對定位同樣，在<body>下的<div>設置如下屬性

position:absolute;
right:100px;
top:150px;
複製代碼

相對右上角，距離窗口右邊100 px和距離窗口頂部150 px。

position:absolute;
left:100px;
bottom:150px;
複製代碼

相對左下角，距離窗口左邊100 px和距離窗口底部150 px。
可是不受限與父元素，父元素是否設置定位屬性都不影響固定定位的元素位置

float屬性

元素的水平方向浮動，意味着元素只能左右移動而不能上下移動。一個浮動元素會盡可能向左或向右移動，直到它的外邊緣碰到包含框或另外一個浮動框的邊框爲止。重要的是任何被聲明float的元素都會自動被設置成塊元素

脫離文檔流，但不脫離文本流。
浮動元素以後的元素將圍繞它。
浮動元素以前的元素將不會受到影響。
對兄弟元素的影響
上面貼非float元素（通常float元素上面貼的都是非float元素）
旁邊貼float元素（靠左，或者靠右的時候貼float元素）
不影響其它塊級元素位置
影響其它塊級元素內部文本（三四兩點就是特性一說的脫離文檔流，不脫離文本流）
對父級元素的影響
從佈局上「消失」（至關於從父級的空間裏面消失了，消失了意味着父級不會再管他的寬高）
高度塌陷（由於在父級的空間裏消失了，因此父級對高度有可能會塌陷，防止塌陷的辦法就是overflow,直接給父標籤設置一個overflow:hidden;具備清除內部浮動的做用；）
float主要用於佈局，標籤在float以後爲了避免影響下面內容的佈局，必定要記得清浮動；清除浮動clear:both;