前端的初學習 -- 第四章 -- CSS定位
阿新 • • 發佈：2021-02-13
前端的初學習 -- 第四章 -- CSS定位
部落格說明
文章內容輸出來源：拉勾教育Java就業急訓營
CSS預設定位
- 塊級元素(block)：h1~h6，p, div 等，自上而下，垂直排列（自動換行）；可以改變寬高
- 行內元素(inline)：a,b,span,等，從左向右，水平排列（不會換行）；不能改變寬高
- 行內塊元素(inline-block)：input,img等，從左向右，水平排列（自動換行）；可以改變寬高
如果要使上三種元素互相轉換，使用：display
<style>
a {
width: 100px;
height: 50px;
border: 1px solid red;
display: inline-block;/* 轉換 */
}
</style>
<body>
<a href="http://baidu.com"> 點選進入百度</a>
<a href="http://baidu.com"> 點選進入百度</a>
<a CSS浮動定位
<style>
.d{
width: 500px;
height: 500px;
border: 2px solid black;
}
#a,#b{
width: 100px;
height: 100px;
}
#a{
background-color: blue;
float: left;/* 向左浮動 */ CSS相對定位
例子：
<style>
.d{
width: 500px;
height: 500px;
border: 2px solid black;
}
#a,#b,#c{
width: 100px;
height: 100px;
}
#a{
background-color: blue;
}
#b{
background-color: orange;
position: relative;/* 相對定位：相對與自己原來的位置進行移動 */
top: 30px;/* 上偏移30px */
left: 50px;/* 左偏移50px */
}
#c{
background-color:darkgreen;
}
</style>
<body>
<div class="d">
<div id="a"></div>
<div id="b"></div>
<div id="c"></div>
</div>
</body>
CSS絕對定位
<style>
.d{
width: 500px;
height: 500px;
background-color: black;
padding: 30px;
}
#a{
width: 300px;
height: 300px;
position: relative;/* 使用定位，讓a做為c的參照物進定位行 */
}
#b,#c{
width: 100px;
height: 100px;
}
#a{
background-color: blue;
}
#b{
background-color: aqua;
}
#c{
background-color: orange;
position: absolute;/* 絕對定位 */
top: 30px;
left: 30px;
}
</style>
<body>
<div class="d">
<div id="a">
<div id="b"></div>
<div id="c"></div>
</div>
</div>
</body>
CSS固定定位
將元素的內容固定在頁面的某個位置，當用戶向下滾動頁面時元素框並不隨著移動
<style>
.gg{
width: 200px;
height: 200px;
background-color: chartreuse;
position: fixed;
left: 100px;
}
</style>
<body>
<div class="gg"></div>
<h1>內容</h1>
<h1>內容</h1>
<h1>內容</h1>
<h1>內容</h1>
<h1>內容</h1>
<h1>內容</h1>
<h1>內容</h1>
<h1>內容</h1>
<h1>內容</h1>
<h1>內容</h1>
<h1>內容</h1>
<h1>內容</h1>
<h1>內容</h1>
<h1>內容</h1>
<h1>內容</h1>
<h1>內容</h1>
<h1>內容</h1>
<h1>內容</h1>
<h1>內容</h1>
<h1>內容</h1>
<h1>內容</h1>
<h1>內容</h1>
<h1>內容</h1>
<h1>內容</h1>
<h1>內容</h1>
<h1>內容</h1>
</body>
CSS Z軸屬性
<style>
div{
width: 100px;
height: 100px;
}
.a{
background-color: blue;
position: relative;
z-index: 3;/* Z軸數值，大者在上面 */
}
.b{
background-color: orange;
position: relative;
top: -50px;
left: 50px;
z-index: 2;/* Z軸數值，大者在上面 */
}
</style>
<body>
<div class="a"></div>
<div class="b"></div>
</body>