理解浮動和position定位

時間 2019-11-20

標籤理解浮動 position 定位欄目 CSS 简体版

原文原文鏈接

前言

　　爲了更好理解浮動和position，建議先看看我寫的這篇文章《Html文檔流和文檔對象模型DOM理解》html

　　CSS設計float屬性的主要目的，是爲了實現文本繞排圖片的效果。然而，這個屬性竟然也成了建立多欄佈局最簡單的方式。佈局

　　如何浮動一個元素？先設定其寬度width，再增長樣式規則float:left/right。spa

　　//注意：該浮動元素已從正常文檔流中刪除。浮動元素是被塊級元素忽略的元素，可是內聯元素知道它們在哪裏，內聯元素會留意浮動元素的邊界，而塊元素會正常流向頁面。設計

　　提到浮動，就得提清除浮動clear。以下圖：htm

　　由於塊級元素不知道左側浮動元素的存在（浮動元素不在文檔流中），因此塊級元素會鋪滿整個區域。能夠用元素的CSS clear屬性來提出請求：當元素流入頁面時，在這個元素的左邊、右邊或兩邊不容許有浮動內容。對象

　　添加樣式clear:left; 這樣，塊級元素就會在浮動元素的下面了。blog

　　想了解更多浮動的知識，請看例子。《圍住浮動元素的三種方法》圖片

　　position屬性有4個值:static、relative、absolute、fixed。文檔

　　(一)staticget

　　HTML元素的默認值，即沒有定位，元素出如今正常的流中。靜態定位的元素不會受到top, bottom, left, right影響。

　　(二)relative

　　相對的是元素原來在文檔流中的位置（或者默認位置）。相對定位會讓元素正常地流入頁面，不過在頁面上顯示以前要進行偏移。

　　//注意：這個元素原來佔據的空間保留着，其餘元素沒改變位置。相對定位元素常常被用來做爲絕對定位元素的容器塊。

　　(三)absolute

　　絕對定位會把元素從文檔流中刪除，塊元素和內聯元素都不知道它的存在，絕對定位的元素的定位上下文是最近的已定位父元素，其默認的定位上下文<body>元素。

　　//絕對定位元素的任何祖先元素均可以成爲它的定位上下文，只要把相應祖先元素的position設定爲relative/fixed便可。

　　(四)fixed

　　固定定位會把元素從文檔流中刪除，塊元素和內聯元素都不知道它的存在，其定位上下文是視窗口。

　　ps：relative、absolute、fixed有z-index屬性。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。