CSS基礎-定位-李南江

</div>

<p><a href="http://bbs.520it.com/forum.php?mod=viewthread&tid=2418" target="_blank">配套視頻下載地址</a></p>

<ul>

<li>

<p>什麼是相對定位? </p>

<ul>

<li>對定位就是相對於自己以前在標準流中的位置來移動</li>

</ul>

</li>

<li>

<ul>

<li><code>position: relative;</code></li>

</ul>

</li>

<li>

</li>

</ul>

margin: 0;

padding: 0;

}

div{

width: 100px;

height: 100px;

}

.box1{

background-color: red;

}

.box2{

background-color: green;

position: relative;

top: 20px;

left: 20px;

}

.box3{

background-color: blue;

}

<style>

</div>

<ul>

<li>

<p>相對定位注意點:</p>

<ul>

<li>在相對定位中同一個方向上的定位屬性只能使用一個<ul>

<li>top/bottom 只能用一個</li>

<li>left/right 只能用一個</li>

</ul>

</li>

<li>相對定位是不脫離標準流的, 會繼續在標準流中佔用一份空間</li>

<li>由於相對定位是不脫離標準流的, 所以在相對定位中區分塊級元素/行內元素/行內塊級元素</li>

<li>由於相對定位是不脫離標準流的, 並且相對定位的元素會佔用標準流中的位置, 所以當給相對定位的元素設置margin/padding等屬性的時會影響到標準流的佈局</li>

</div></li>

</ul>

</li>

<li>

<p>相對定位應用場景:</p>

<ul>

<li>

<p>用於對元素進行微調</p>

<ul>

<li>

<pre><code class="html">input{

width: 200px;

height: 50px;

}

img{

width: 100px;

height: 50px;

position: relative;

top: 20px;

}</code></pre>

</li>

</div></li>

</div></li>

</ul>

</li>

<li>

<p>配合後面學習的絕對定位來使用</p>

</li>

</ul>

</li>

</ul>

<ul>

<li>

<p>什麼是絕對定位?</p>

<ul>

<li>絕對定位就是相對於body或者某個定位流中的祖先元素來定位</li>

</ul>

</li>

<li>

<ul>

<li><code>position: absolute;</code></li>

</ul>

</li>

<li>

</li>

</ul>

margin: 0;

padding: 0;

}

div{

width: 100px;

height: 100px;

}

.box1{

background-color: red;

}

.box2{

background-color: green;

position: absolute;

left: 0;

top: 0;

}

.box3{

background-color: blue;

}

</style>

</div>

</div>

<ul>

<li>絕對定位注意點:<ul>

<li>絕對定位的元素是脫離標準流的, 不會佔用標準流中的位置</li>

<li>由於絕對定位的元素是脫離標準流的, 所以絕對定位的元素不區分塊級元素/行內元素/行內塊級元素</li>

<li>如果一個絕對定位的元素是以body作爲參考點, 那麼其實是以網頁首屏的寬度和高度作爲參考點, 而不是以整個網頁的寬度和高度作爲參考點<ul>

<li>相對於body定位會隨着頁面的滾動而滾動</li>

</ul>

</li>

<li>一個絕對定位的元素會忽略祖先元素的padding</li>

</ul>

</li>

</ul>

margin: 0;

padding: 0;

}

.box1{

width: 300px;

height: 300px;

background-color: red;

border: 10px solid #000;

padding: 30px;

position: relative;

box-sizing: border-box;

}

.box2{

width: 100px;

height: 100px;

background-color: green;

position: absolute;

left: 0;

top: 0;

}

</style>

</div></code></pre>

</div>

</div>

<ul>

<li>絕對定位參考點:<ul>

<li>默認情況下所有的絕對定位的元素, 無論有沒有祖先元素, 都會以body作爲參考點</li>

<li>如果一個絕對定位的元素有祖先元素, 並且祖先元素中有一個是定位流中的元素, 那麼這個絕對定位的元素就會以定位流的那個祖先元素作爲參考點</li>

<li>如果一個絕對定位的元素有祖先元素, 並且祖先元素中有多個是定位流中的元素, 那麼這個絕對定位的元素會以離它最近的那個定位流的祖先元素爲參考點</li>

</ul>

</li>

</ul>

margin: 0;

padding: 0;

}

.box1{

width: 300px;

height: 300px;

background-color: red;

position: relative;

}

.box2{

width: 200px;

height: 200px;

background-color: green;

}

.box3{

width: 100px;

height: 100px;

background-color: blue;

position: absolute;

left: 0;

bottom: 0;

}

</style>

</div>

</div></code></pre>

</div>

margin: 0;

padding: 0;

}

.box1{

width: 300px;

height: 300px;

background-color: red;

position: relative;

}

.box2{

width: 200px;

height: 200px;

background-color: green;

position: relative;

}

.box3{

width: 100px;

height: 100px;

background-color: blue;

position: absolute;

left: 0;

bottom: 0;

}

</style>

</div>

</div></code></pre>

</div>

<ul>

<li>絕對定位水平居中<ul>

<li>1.注意當一個盒子絕對定位之後不能使用margin: 0 auto;讓盒子自身居中</li>

<li>2.如果想讓過一個絕對定位的盒子自身居中, 可以使用left: 50%; margin-left:-元素寬度一半px;</li>

</ul>

</li>

</ul>

<head>

<title>74-絕對定位水平居中</title>

<style>

margin: 0;

padding: 0;

}

div{

width: 400px;

height: 50px;

background-color: red;

position: absolute;

/*無效*/

/*margin: 0 auto;*/

/*有效*/

left: 50%;

margin-left:-200px;

}

</style>

</head>

<body>

</body>

</html></code></pre>

<ul>

<li>絕對定位應用場景:<ul>

<li>用於對元素進行微調</li>

<li>配合後面學習的絕對定位來使用</li>

</ul>

</li>

</ul>

<ul>

<li>

<p>企業開發中一般相對定位和絕對定位都是一起出現, 很少單獨使用</p>

</li>

<li>

<p>爲什麼要子絕父相?</p>

</li>

</ul>

<head>

<style>

margin: 0;

padding: 0;

}

ul{

width: 800px;

height: 50px;

background-color: red;

list-style: none;

margin: 0px auto;

margin-top: 100px;

}

li{

width: 100px;

/*height: 50px;*/

line-height: 50px;

float: left;

background-color: gray;

text-align: center;

}

.li03{

background-color: darkgray;

position: relative;

}

ul li img{

缺點以前的位置仍然被佔用, 不能讓文字居中對齊

/*position: relative;

left: -35px;

top: -15px;*/

/* 瀏覽器調整之後位置會發生變化*/

/* position: absolute;

top: 95px;

left: 535px;*/

position: absolute;

left: 37px;

top: -5px;

}

</style>

</head>

<body>

<ul>

</ul>

</body>

</html></code></pre>

</div>

</div>

</div>

<ul>

<li>相對定位和絕對定位一般都是用來做覆蓋效果的, 當看到某個元素覆蓋在另外一個元素上時, 第一時間就要想到定位流</li>

</ul>

</div>

</div>

<ul>

<li>

<p>什麼是固定定位?</p>

<ul>

<li>固定定位和前面學習的背景關聯方式很像, 背景關聯方式可以讓某個圖片不隨着滾動條的滾動而滾動, 而固定定位可以讓某個盒子不隨着滾動條的滾動而滾動</li>

</ul>

</li>

<li>

<ul>

<li><code>position: fixed;</code></li>

</ul>

</li>

<li>

</li>

</ul>

<head>

<style>

margin: 0;

padding: 0;

}

width: 100px;

}

width: 50px;

height: 50px;

background-color: rgba(0, 0, 0, 0.3);

border-radius: 25px;

text-decoration: none;

text-align: center;

color: #000;

position: fixed;

right: 10px;

bottom: 10px;

}

</style>

</head>

<body>

<p>我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字我是文字</p>

</body>

</html></code></pre>

</div>

<ul>

<li>

<p>固定定位注意點:</p>

<ul>

<li>固定定位的元素是脫離標準流的, 不會佔用標準流中的位置</li>

<li>由於固定定位的元素是脫離標準流的, 所以絕對定位的元素不區分塊級元素/行內元素/行內塊級元素</li>

<li>IE6不支持固定定位</li>

</ul>

</li>

<li>

<p>固定定位應用場景:</p>

<ul>

<li>網頁對聯廣告</li>

<li>網頁頭部通欄(穿透效果)</li>

</ul>

</li>

</ul>

</div>

<ul>

<li>

<p>什麼是靜態定位?</p>

<ul>

<li>默認情況下標準流中的元素position屬性就等於static, 所以靜態定位其實就是默認的標準流</li>

</ul>

</li>

<li>

<p>靜態定位應用場景:</p>

<ul>

<li>一般用於配合JS清除定位屬性<h3>z-index屬性</h3>

</li>

</ul>

</li>

<li>

<p>什麼是z-index值?</p>

<ul>

<li>用於指定定位的元素的覆蓋關係</li>

</ul>

</li>

<li>

<p>定位元素的覆蓋關係:</p>

<ul>

<li>默認情況下定位的元素一定會蓋住沒有定位的元素</li>

<li>默認情況下寫在後面的定位元素會蓋住前面的定位元素</li>

<li>默認情況下所有元素的z-index值都是0, 如果設置了元素的z-index值, 那麼誰比較大誰就顯示在前面</li>

<li>定位元素的從父現象<ul>

<li>父元素沒有z-index值, 那麼子元素誰的z-index大誰蓋住誰</li>

<li>父元素z-index值不一樣, 那麼父元素誰的z-index大誰蓋住誰</li>

</ul>

</li>

</ul>

</li>

</ul>

</div>

</div>

</div>

</div>

</div>

<ul>

<li>z-index應用場景<ul>

<li>控制界面上的定位元素的覆蓋關係, 例如網頁中後面的定位元素不能覆蓋前面的導航條通欄</li>

</ul>

</li>

</ul>

</div>

CSS基礎-定位-李南江

再談23種設計模式（3）：行爲型模式（學習筆記）

Power Automate Desktop 安裝完，登錄後老是提示one driver 錯誤

微前端學習筆記(4):從微前端到微模塊之EMP與hel-micro方案探索

微前端學習筆記（1）：微前端總體架構概述，從微服務發微

985 碩士程序員，空窗 4 個月沒有 Offer！

一文搞懂 Spring 循環依賴

賽博鬥地主——使用大語言模型扮演Agent智能體玩牌類遊戲。

VScode右鍵打開(添加到右鍵)

記一次 .NET某工控視覺自動化系統卡死分析

WindowsServer--SQL Server搭建主從同步實現讀寫分離 - 事務性分發

HTML教程-CSS顯示模式-李南江

HTML5教程-多媒體標籤-李南江

HTML5教程-CSS基礎清除浮動-李南江

HTML5教程-HTML5基本概念-李南江

HTML5教程-基礎標籤-李南江

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結