一.標準流(Normal Flow)
- 默認情況下,元素都是按照normal flow(標準流洛史、常規(guī)流秘豹、正常流、文檔流【document flow】)進行排布
- 從左到右诱咏、從上到下按順序擺放好
- 默認情況下苔可,互相之間不存在層疊現(xiàn)象
二.為何不用margin,padding定位
- 在標準流中,可以使用margin袋狞、padding對元素進行定位
- 其中margin還可以設置負數(shù)
- 比較明顯的缺點是
- 設置一個元素的margin或者padding焚辅,通常會影響到標準流中其他元素的定位效果
- 不便于實現(xiàn)元素層疊的效果
三.定位
3.1 定位模式
定位模式?jīng)Q定元素的定位方式 ,它通過 CSS 的 position 屬性來設置苟鸯,其值可以分為四個:
- static:靜態(tài)定位
- relative:相對定位
- absolute:絕對定位
- fixed:固定定位
3.2 邊偏移
邊偏移就是定位的盒子移動到最終位置同蜻。有 top、bottom早处、left 和 right 4 個屬性湾蔓。
3.3 static定位
- 靜態(tài)定位是元素的默認定位方式,無定位的意思砌梆。
- 元素按照normal flow布局
- left 默责、right、top咸包、bottom沒有任何作用
3.4 相對定位
相對定位是元素在移動位置的時候桃序,是相對于它原來的位置來說的(自戀型)。
語法:
選擇器 { position: relative; }
相對定位的特點:(務必記桌锰薄)
- 它是相對于自己原來的位置來移動的(移動位置的時候參照點是自己原來的位置)葡缰。
- 原來在標準流的位置繼續(xù)占有,后面的盒子仍然以標準流的方式對待它忱反。因此泛释,相對定位并沒有脫標。它最典型的應用是給絕對定位當?shù)奈滤恪A!!?/li>
- 元素按照normal flow布局
- 可以通過left注竿、right茄茁、top魂贬、bottom進行定位
- nleft、right裙顽、top付燥、bottom用來設置元素的具體位置,對元素的作用如下圖所示
- image-20210506172428927
- 相對定位的應用場景
- 在不影響其他元素位置的前提下愈犹,對當前元素位置進行微調
<style>
div {
background-color: pink;
}
strong {
/*
position:relative
1.參照自己原來的位置進行定位
2.脫離標準流
*/
position: relative;
left: 100px;
top: -30px;
}
</style>
<body>
<a href="">a元素</a>
<strong>strong</strong>
<i>i</i>
<img src="../img/ysx.jpg" alt="" width="300">
<div>div元素</div>
</body>
3.4.1 相對定位練習一:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>relative練習一</title>
</head>
<style>
sub {
position: relative;
top: 10px;
left: 10px;
}
sup {
position: relative;
top: -20px;
left: 20px;
}
</style>
<body>
<h1>請計算n<sub>1</sub>+n<sub>2</sub>+n<sup>2</sup>的值</h1>
</body>
</html>
3.4.2 相對練習二
<style>
/*
讓圖片居中顯示
1.圖片寬度:1280*365
2.向左移:(1280-800)/2=240
*/
.content {
width: 800px;
background-color: pink;
height: 365px;
margin: 20px auto;
overflow: hidden;
}
.content>img {
position: relative;
left: -240px;
top: 0px;
}
</style>
<body>
<div class="content">
<img src="../img/meng.png" alt="">
</div>
</body>
3.5 絕對定位
元素脫離normal flow(脫離標準流键科、脫標)
-
可以通過left、right漩怎、top勋颖、bottom進行定位
定位參照對象是最鄰近的定位祖先元素
如果找不到這樣的祖先元素,參照對象是視口
- image-20210506205111392
-
定位元素(positioned element)
position值不為static的元素
-
==也就是position值為relative勋锤、absolute饭玲、fixed的元素==
<img src="https://gitee.com/jason_java/html-css-imgs/raw/master/image/flex/20210507120740.png" alt="image-20210506235347351" style="zoom:33%;" />
.content { width: 500px; height: 500px; background-color: pink; } .box { width: 300px; height: 300px; background-color: red; position: absolute; } a { position: absolute; right: 50px; top: 60px; }
<img src="https://gitee.com/jason_java/html-css-imgs/raw/master/image/flex/20210507120744.png" alt="image-20210506235725462" style="zoom:33%;" />
.content { width: 500px; height: 500px; background-color: pink; } .box { width: 300px; height: 300px; background-color: red; position: absolute; right: 50px; top: 50px; } a { position: absolute; right: 50px; top: 60px; }
3.5.1 “子絕父相”
在絕大數(shù)情況下,子元素的絕對定位都是相對于父元素進行定位
如果希望子元素相對于父元素進行定位叁执,又不希望父元素脫標茄厘,常用解決方案是:
父元素設置position: relative(讓父元素成為定位元素,而且父元素不脫離標準流谈宛,子元素設置position: absolute
簡稱為“子絕父相”
3.5.2 絕對定位練習一:
3.5.2.1 浮動+margin-left+margin-top
<img src="https://gitee.com/jason_java/html-css-imgs/raw/master/image/flex/20210507120748.png" alt="image-20210507010632615" style="zoom: 50%;" />
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>absolute練習一:浮動</title>
<link rel="stylesheet" href="../css/reset.css">
<style>
/*
浮動+margin-left+margin-top
*/
.content {
position: relative;
display: inline-block;
}
.content>ul {
width: 300px;
height: 100px;
position: absolute;
bottom: 50px;
left: 15px;
}
.content>ul>li {
width: 70px;
height: 30px;
background-color: #fff;
border-radius: 40px;
margin-left: 22.5px;
margin-top: 13.3px;
text-align: center;
line-height: 30px;
font-size: 14px;
float: left;
box-shadow: 0 0 1px raba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
<div class="content">
<img src="./img/beauty-left-img.jpg" alt="">
<ul>
<li><a href="#">精致護膚</a></li>
<li><a href="#">人氣面膜</a></li>
<li><a href="#">大牌彩妝</a></li>
<li><a href="#">防曬修護</a></li>
<li><a href="#">迷人香氛</a></li>
<li><a href="#">面部精華</a></li>
</ul>
</div>
</body>
</html>
3.5.2.2 無浮動+display:inline-block+margin:0 auto;left:0;right:0+text-align: justify;text-align-last: justify;
<img src="https://gitee.com/jason_java/html-css-imgs/raw/master/image/flex/20210507120752.png" alt="image-20210507010816670" style="zoom: 50%;" />
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>absolute練習一:無浮動</title>
<link rel="stylesheet" href="../css/reset.css">
<style>
/*
無浮動+display:inline-block+margin:0 auto;left:0;right:0+text-align: justify;
text-align-last: justify;
*/
.content {
position: relative;
display: inline-block;
}
.content>ul {
width: 300px;
height: 100px;
position: absolute;
bottom: 50px;
left: 0;
/* text-align: justify;讓內容等分次哈,但是對最后一行無效 */
text-align: justify;
text-align-last: justify;
/*讓里面的ul居中,需要設置left,right都為零*/
left: 0;
right: 0;
margin: 0 auto;
}
.content>ul>li {
/*
不設置margin-left和margin-right,設置里面的a變?yōu)閕nline-block入挣,并且a寬度增大
*/
display: inline-block;
}
.content>ul>li>a {
display: inline-block;
width: 80px;
height: 30px;
margin-top: 10px;
background-color: #fff;
border-radius: 40px;
/*
下面兩個是覆蓋父元素的text-align
*/
text-align: center;
text-align-last: center;
line-height: 30px;
font-size: 14px;
box-shadow: 0 0 0 1px raba(0, 0, 0, 0.5);
}
</style>
</head>
<body>
<div class="content">
<img src="./img/beauty-left-img.jpg" alt="">
<ul>
<li><a href="#">精致護膚</a></li>
<li><a href="#">人氣面膜</a></li>
<li><a href="#">大牌彩妝</a></li>
<li><a href="#">防曬修護</a></li>
<li><a href="#">迷人香氛</a></li>
<li><a href="#">面部精華</a></li>
</ul>
</div>
</body>
</html>
3.5.2.3 flex
3.5.3 絕對練習二:網(wǎng)易考拉QRcode
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>網(wǎng)易考拉QRcode</title>
</head>
<link rel="stylesheet" href="../css/reset.css">
<style>
.QR {
position: relative;
margin-left: 300px;
font-size: 13px;
text-align: center;
/* background-color: pink; */
}
.QR>.QRIMG {
position: absolute;
top: 30px;
/*
向左移動50%;
*/
left: 0;
transform: translate(-50%);
margin-left: 50%;
border: 1px solid #ccc;
padding: 5px 5px 0;
display: none;
}
.QR>.QRIMG>span {
display: inline-block;
margin-top: 5px;
}
.QR>span:first-child:hover {
color: red;
}
.QR:hover .QRIMG {
/* display: block; */
/*
display:inline就可以了硝拧,因為.QRIMG絕對定位了
*/
display: inline;
}
.arrow {
position: absolute;
top: -6px;
left: 0;
right: 0;
margin: 0 auto;
width: 10px;
height: 10px;
background-color: #fff;
border-top: 1px solid #eaeaea;
border-left: 1px solid #eaeaea;
transform: rotate(45deg);
margin-top: 0 !important;
}
</style>
<body>
<a class="QR" href="">
<span>手機考拉</span>
<span class="QRIMG">
<span class="arrow"></span>
<img src="./img/qrcode.png" alt="">
<span>下載APP</span>
<span>領1000元新人紅包</span>
</span>
</a>
</body>
</html>
3.5.4 絕對定位技巧
-
絕對定位元素(absolutely positioned element)
- position值為absolute或者fixed的元素
-
對于絕對定位元素來說
- ==定位參照對象的寬度 = left + right + margin-left + margin-right + 絕對定位元素的實際占用寬度==
- ==定位參照對象的高度 = top + bottom + margin-top + margin-bottom + 絕對定位元素的實際占用高度==
-
如果希望絕對定位元素的寬高和定位參照對象一樣径筏,可以給絕對定位元素設置以下屬性
- left: 0、right: 0障陶、top: 0滋恬、bottom: 0、margin:0
- <img src="https://gitee.com/jason_java/html-css-imgs/raw/master/image/flex/20210507120827.png" alt="image-20210507114106208" style="zoom: 50%;" />
-
如果希望絕對定位元素在定位參照對象中居中顯示抱究,可以給絕對定位元素設置以下屬性
left: 0恢氯、right: 0、top: 0鼓寺、bottom: 0勋拟、margin: auto
-
另外,還得設置具體的寬高值(寬高小于定位參照對象的寬高)
水平垂直居中:left: 0妈候、right: 0敢靡、top: 0、bottom: 0苦银、margin: auto
<img src="https://gitee.com/jason_java/html-css-imgs/raw/master/image/flex/20210507120830.png" alt="image-20210507114308140" style="zoom:50%;" />
水平居中:left: 0啸胧、right: 0赶站、margin:0 auto
<img src="https://gitee.com/jason_java/html-css-imgs/raw/master/image/flex/20210507120832.png" alt="image-20210507114647206" style="zoom:50%;" />
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>絕對定位技巧</title> </head> <style> /* 絕對定位技巧: 1.- 定位參照對象的寬度 = left + right + margin-left + margin-right + 絕對定位元素的實際占用寬度 - 定位參照對象的高度 = top + bottom + margin-top + margin-bottom + 絕對定位元素的實際占用高度 2.- 如果希望絕對定位元素的寬高和定位參照對象一樣,可以給絕對定位元素設置以下屬性 - left: 0纺念、right: 0贝椿、top: 0、bottom: 0陷谱、margin:0 3.- 如果希望絕對定位元素在定位參照對象中居中顯示烙博,可以給絕對定位元素設置以下屬性 - left: 0、right: 0叭首、top: 0习勤、bottom: 0、margin: auto - 另外焙格,還得設置具體的寬高值(寬高小于定位參照對象的寬高) */ .content { width: 600px; height: 600px; background-color: pink; position: relative; } .div { height: 100px; width: 100px; background-color: red; /* 1.對于里面沒有內容图毕,則這個盒子會消失,需要里面有內容撐開盒子的寬度 2.如果希望絕對定位元素的寬高和定位參照對象一樣眷唉,可以給絕對定位元素設置以下屬性 - left: 0予颤、right: 0、top: 0冬阳、bottom: 0蛤虐、margin:0 3.- 如果希望絕對定位元素在定位參照對象中居中顯示,可以給絕對定位元素設置以下屬性 - left: 0肝陪、right: 0驳庭、top: 0、bottom: 0氯窍、margin: auto - 另外饲常,還得設置具體的寬高值(寬高小于定位參照對象的寬高) */ position: absolute; left: 0; /* top: 0; */ right: 0; /* bottom: 0; */ margin: 0 auto; } </style> <body> <div class="content"> <div class="div"></div> </div> </body> </html>
3.6 固定定位
- 元素脫離normal flow(脫離標準流、脫標)
- 可以通過left狼讨、right贝淤、top、bottom進行定位
- 定位參照對象是視口(viewport)
- 當畫布滾動時政供,固定不動
3.6.1 畫布與視口
視口(Viewport)
- 文檔的可視區(qū)域
- 如右圖紅框所示
畫布:進度條里面所有的內容
3.6.2 fixed
<style>
/*
固定定位:
1.脫離文檔流
2.通過left,right,top,bottom進行定位
3.當畫布滾動時播聪,固定不動
4.定位參照對象是視口(viewport)
*/
div {
background-color: pink;
}
strong {
position: fixed;
right: 10px;
top: 300px;
}
</style>
<body>
<a href="">a元素</a>
<strong>strong</strong>
<i>i</i>
<img src="../img/ysx.jpg" alt="" width="300">
<div>div元素</div>
</body>
3.6.3 fixed練習:網(wǎng)易考拉
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>網(wǎng)易考拉固定定位</title>
</head>
<style>
.fixed-box {
width: 80px;
height: 320px;
border: 1px solid #eaeaea;
position: fixed;
right: 20px;
top: 200px;
text-align: center;
font-size: 14px;
/* line-height: 80px; */
}
.fixed-box a {
display: block;
text-decoration: none;
height: 80px;
border-bottom: 1px solid #eaeaea;
}
.fixed-box a:last-child {
border-bottom: none;
}
.fixed-box a>span {}
.fixed-box a>i {
display: block;
width: 20px;
height: 20px;
/* background-color: red; */
margin: 0 auto 0;
padding-top: 20px;
}
.fixed-box a:first-child:hover {
background-image: url("img/icon-aside-right-signin-active.png");
background-repeat: no-repeat;
background-position: center 20px;
}
.fixed-box a:nth-child(2):hover {
background-image: url("./img/icon-aside-right-cart-active.png");
background-repeat: no-repeat;
background-position: center 20px;
}
.fixed-box a:nth-child(3):hover {
background-image: url("./img/icon-aside-right-phone-active.png");
background-repeat: no-repeat;
background-position: center 20px;
}
.fixed-box a:last-child:hover {
background-image: url("./img/icon-aside-right-top-active.png");
background-repeat: no-repeat;
background-position: center 20px;
}
</style>
<body>
<div class="fixed-box">
<a href=""><i><img src="./img/icon-aside-right-signin.png" alt=""></i><span>簽到</span></a>
<a href=""><i><img src="./img/icon-aside-right-cart.png" alt=""></i><span>購物車</span></a>
<a href=""><i><img src="./img/icon-aside-right-phone.png" alt=""></i><span>APP</span></a>
<a href=""><i><img src="./img/icon-aside-right-top.png" alt=""></i><span>Top</span></a>
</div>
</body>
</html>
3.7 position總結
3.8 Z-Index元素的層疊
- z-index屬性用來設置定位元素的層疊順序(僅對定位元素有效)
- 取值可以是正整數(shù)、負整數(shù)布隔、0
- 比較原則
- 如果是兄弟關系
- z-index越大离陶,層疊在越上面
- z-index相等,寫在后面的那個元素層疊在上面
- 如果不是兄弟關系
- 各自從元素自己以及祖先元素中衅檀,找出最鄰近的2個定位元素進行比較
- 而且這2個定位元素必須有設置z-index的具體數(shù)值