CSS 父元素中的絕對定位

position屬性實現絕對定位

<html>
<head>
<title>position屬性</title>
<style type="text/css">
<!--
body{
    margin:10px;
    font-family:Arial;
    font-size:13px;
}
#father{
    background-color:#a0c8ff;
    border:1px dashed #000000;
    width:100%;
    height:100%;
}
#block{
    background-color:#fff0ac;
    border:1px dashed #000000;
    padding:10px;
    position:absolute; /* absolute絕對定位 */
    left:20px; /* 塊的左邊框離頁面左邊界20px */
    top:40px; /* 塊的上邊框離頁面上邊界40px */
}
-->
</style>
</head>
<body>
<div id="father">
<div id="block">absolute</div>
</div>
</body>
</html>

以上的代碼我們可以看出父塊#father沒有設置position屬性,而子塊#block采用的是絕對定位,經過測試發現子塊#block參照瀏覽窗口左上角

為原點,子塊左邊框相對頁面<body>左邊的距離為20px,子塊的上邊框相對頁面<body>上面的距離為40px

為父塊這是position屬性

#father{
    background-color:#a0c8ff;
    border:1px dashed #000000;
    position:relative;
    width:100%;
    height:100%;
}

我們發現子塊的參照物為父塊的#father,距左側20px,距上端40px

注意top、right、bottom、left這4個CSS屬性，它們都是配合position屬性使用的，表示的是塊的各個邊界離頁面邊框(position設置為absolute時)

或者原來的位置(position設置為relative)的距離。只有當position屬性設置為absolute或者relative時才能生效；

用position屬性實現相對定位

<html>
<head>
<title>position屬性</title>
<style type="text/css">
<!--
body{
    margin:10px;
    font-family:Arial;
    font-size:13px;
}
#father{
    background-color:#a0c8ff;
    border:1px dashed #000000;
    width:100%; height:100%;
    padding:5px;
}
#block1{
    background-color:#fff0ac;
    border:1px dashed #000000;
    padding:10px;
    position:relative; /* relative相對定位 */
    left:15px; /* 子塊的左邊框距離它原來的位置15px */
    top:10%;
}
-->
</style>
</head>
<body>
<div id="father">
<div id="block1">relative</div>
</div>
</body>
</html>

我們可以看到字塊的左邊框相對于其父塊的左邊框(它原來所在的位置)距離為15px,上邊框也是一樣的道理,為10%;

理解"它原來的位置":子塊和父塊原先的位置的是一致的(因為父塊包含字塊,視覺上看是幾乎重疊的)

此時子塊的寬度依然是未移動前的寬度,撐滿未移動前父塊的內容。只是由于向右移動了，因此右邊框超出了父塊。

如果希望子塊的寬度僅僅為其內容加上自己的padding值，可以將它的float屬性設置為left，或者指定其寬度width；

案例: 文本在圖片上顯示

述

在HTML中,存在這許許多多的元素(同:”HTML標簽”),這些元素最終可分為三類,分別是塊級元素,內聯元素(同:”行內元素”),塊級內聯元素(同:”行內塊元素”)。

你對這些元素是否真的了解呢?

我們來看看這三類元素的特點:

塊級元素

一.特點

1.每個塊級元素都從新的一行開始顯示(塊級元素獨占一行)

2.元素的寬度,高度,內邊距(padding),邊框(border),外邊框(margin)都能隨意設置

3.塊級元素在網頁中所占面積=內容區(content)+內邊距(padding)+邊框(border)+外邊距(margin)

4.塊級元素本身未設置寬度的情況下,寬度=父元素寬度-該元素的左右外邊距-該元素的左右邊框-該元素的左右內邊距

5.塊級元素未設置padding和border的情況下,padding和border的數值為0

6.塊級元素未設置寬度和外邊距的情況下,margin的值為0,寬度為100%(即與父元素寬度一致)

7.塊級元素設置寬度但未設置外邊距的情況下,左外邊距的值為0

8.塊級元素設置寬度,未設置padding和border,同時設置margin: 0 auto的情況下,左右外邊距平分父元素寬度-該元素寬度所剩余的空間

9.塊級內聯元素不受父元素的line-height以及自身的vertical-align影響

二.將非塊級元素轉換成塊級元素的方法

1.display:block

2.float:left或right

3.position:absolute或fixed

4.父元素使用display:flex,子元素會變為塊級元素

三.常見塊級元素

內聯元素

一.特點

1.當父元素寬度足以放下多個內聯元素時,一行內可以顯示多個內聯元素,否則放不下的內聯元素將另起一行(一行存放多個內聯元素)

2.內聯元素的寬度,高度由該元素的內容撐開

3.內聯元素的寬度/高度/padding-top/border-top/margin-top/margin-bottom設置無效

4.如果padding/border/margin未設置的情況下,全部為0

5.內聯元素受父元素的line-height以及自身的vertical-align影響

二.將非內聯元素轉換成內聯元素的方法

使用display:inline

三.常見內聯元素

塊級內聯元素

一.特點

1.當父元素寬度足以放下多個塊級內聯元素時,一行內可以顯示多個塊級內聯元素,否則放不下的塊級內聯元素將另起一行(一行存放多個塊級內聯元素)

2.塊級內聯元素的寬度,高度,內邊距(padding),邊框(border),外邊框(margin)都能隨意設置

3. 塊級內聯元素的寬度,高度未設置的情況下,由該元素的內容撐開

4.塊級內聯元素受父元素的line-height以及自身的vertical-align影響

二.將非內聯元素轉換成內聯元素的方法

使用display:inline-block

三.常見內聯元素

<input>

web前端之二叉搜索樹

、HTML 塊元素

大多數 HTML 元素被定義為塊級元素或內聯元素；
元素在瀏覽器顯示時，通常會以新行來開始和結束；
如：<h1>，<p>，<ul>，<table>，<div>等標簽；

二、HTML 內聯元素

內聯元素在顯示時通常不會以新行開始；
如：<b>， <td>， <a>， <img>，<span>等標簽；

三、HTML <div> 元素

HTML 中的<div> 元素是塊級元素，它是可用于組合其他 HTML 元素的容器；
<div> 標簽定義 HTML 文檔中的一個分隔區塊或者一個區域部分；
<div> 元素經常與 CSS 一起使用，用來布局網頁；

四、div的使用

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
</head>
<style>
 .all{
 width:500px;
 height:500px;
 margin:0 auto;
 background-color:#000;
 }
 .one{
 height:100px;
 background-color:#89E1BF;
 }
 .two{
 height:100px;
 background-color:#DEE099;
 }
 .three{
 height:100px;
 background-color:#D7A1CE;
 }
 
</style>
<body>
 <!--父div，all是黑色-->
 <div class="all">
 <!--子div，one是綠色-->
 <div class="one">
 </div>
 <!--子divtwo，是黃色-->
 <div class="two">
 </div>
 <!--子div，three是紫色-->
 <div class="three">
 </div>
 </div>
</body>
</html>

演示效果如圖所示：

在線咨詢

上一篇：JS短文：如何使用 JS 將文本以純文本形式粘貼到可編輯內容元素中？
下一篇：什么是EDM電子郵件？是怎么制作的？如何使用？一文講清楚

您的項目需求

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

整合營銷服務商

CSS 父元素中的絕對定位

述

塊級元素

內聯元素

塊級內聯元素

您的項目需求