position: static; 靜態定位 / 常規定位 / 自然定位
忽略top/right/bottom/left/z-index的影響，使元素回到自然流中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .block{ width:100px; height:100px; line-height:100px; text-align:center; position: relative; top:10px; } .block:first-child{ border:1px solid; } .block:nth-child(2){ position: static; border:1px solid red; } .block:nth-child(3){ border:1px solid blue; } .block:nth-child(4){ border:1px solid green; } </style> </head> <body> <div class="block">A</div> <div class="block">B</div> <div class="block">C</div> <div class="block">D</div> </body> </html>
設定margin:auto為水平居中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .block{ width:100px; height:100px; line-height:100px; text-align:center; position: static; margin:auto; } .block:first-child{ border:1px solid; } .block:nth-child(2){ border:1px solid red; } .block:nth-child(3){ border:1px solid blue; } .block:nth-child(4){ border:1px solid green; } </style> </head> <body> <div class="block">A</div> <div class="block">B</div> <div class="block">C</div> <div class="block">D</div> </body> </html>
position:relative 相對定位
相對于自己在常規流中的位置，進行偏移
原來的空間依然預留
可以使浮動元素發生偏移，并控制堆疊順序
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .block{ width:100px; height:100px; line-height:100px; text-align:center; color:white; float:left; position: relative; } .block:first-child{ background:black; z-index:2; } .block:nth-child(2){ background:red; left:-50px; z-index:1; } </style> </head> <body> <div class="block">A</div> <div class="block">B</div> </body> </html>
position:absolute;
參照物是最近定位的祖先元素
如果沒有祖先元素被定位，則默認為body
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .block{ width:100px; height:100px; line-height:100px; text-align:center; border:2px solid; position: relative; } .block:nth-child(2){ border-color:red; position: absolute; top:20px; left:20px; } </style> </head> <body> <div class="block">A</div> <div class="block">B</div> <div class="block">C</div> </body> </html>
實作水平垂直居中定位：
1、給父元素設定：position: relative;
2、給子元素設定：
position: absolute;
top:0;
left:0;
right:0;
bottom:0;
margin:auto auto;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .parent{ width:100px; height:100px; border:2px solid; position: relative; } .child{ width:40px; height:40px; border:2px solid; border-color:red; position: absolute; top:0; left:0; right:0; bottom:0; margin:auto auto; } </style> </head> <body> <div class="parent"> <div class="child"></div> </div> </body> </html>
position:fixed;
繼承position:absolute;的所有特征，區別是以視口做參照來定位
position:sticky;
與top偏移量結合使用
如果最近祖先元素有定位，則參考最近祖先元素；否則參考視口
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .banner{ width:1200px; height:100px; background:#abcdef; margin:0 auto; } .nav{ width:1200px; height:50px; background:orange; margin:0 auto; position: sticky; top:0; } .container{ width:1200px; height:1000px; background:pink; margin:0 auto; } </style> </head> <body> <div class="banner">海報大圖</div> <div class="nav">導航呀</div> <div class="container">內容，，，</div> </body> </html>
相對于最近定位的祖先元素做參考：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .banner{ width:1200px; height:100px; background:#abcdef; margin:0 auto; } .nav{ width:1200px; height:50px; background:orange; margin:0 auto; position: sticky; top:20px; } .container{ width:1200px; height:200px; background:pink; margin:0 auto; position: relative; overflow-y: scroll; overflow-x: hidden; } p{ height:1000px; } </style> </head> <body> <div class="banner">海報大圖</div> <div class="container"> <div class="nav">導航呀</div> <p>內容，，，</p> </div> </body> </html>
導航在居中位置
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .banner{ width:1200px; height:100px; background:#abcdef; margin:0 auto; } .nav{ width:1200px; height:50px; background:orange; margin:0 auto; position: sticky; top:20px; } .container{ width:1200px; height:200px; background:pink; margin:0 auto; position: relative; overflow-y: scroll; overflow-x: hidden; } p{ height:1000px; } p:first-child{ height:50px; } </style> </head> <body> <div class="banner">海報大圖</div> <div class="container"> <p>內容，，，</p> <div class="nav">居中導航呀</div> <p>內容，，，</p> </div> </body> </html>
www.caniuse.com 檢測瀏覽器兼容性
彈出層的簡單實體
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .content{ width:100%; height:1000px; background:url(bg.jpg) top center no-repeat; } .opacity{ width:100%; height:100%; background-color:rgba(0,0,0,.6); position: fixed; top:0; left:0; } .login{ width:300px; height:200px; text-align:center; line-height:200px; position: fixed; background-color:#fff; top:50%; left:50%; margin-top:-100px; margin-left:-150px; } </style> </head> <body> <div class="content"></div> <div class="opacity"></div> <div class="login">登錄框~</div> </body> </html>
側邊欄導航實體
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin:0; padding:0; } ul{ list-style:none; } .content{ width:100%; height:1000px; background:url(bg.jpg) top center no-repeat; } .nav{ width:160px; height:205px; position: fixed; left:0; top:50%; margin-top:-102px; } .nav-li{ width:160px; height:auto; line-height:40px; border-bottom:1px solid #fff; color:#fff; background:#333; text-align: center; cursor:pointer; } .tit{ width:160px; height:40px; } .nav-li ul{ width:160px; height:auto; background:#fff; display: none; } .nav-li:hover ul{ display: block } .nav-li ul li{ width:160px; height:40px; color:#333; border-bottom:1px dashed #666; text-align: center; line-height:40px; position: relative; } .nav-li ul li:hover .subnav{ display: block; } .subnav{ position: absolute; width:160px; height:auto; top:0; left:160px; background:#444; display: none; } .subnav-item{ width:160px; height:40px; border-bottom:1px solid #fff; color:#fff; } </style> </head> <body> <div class="content"> <div class="nav"> <div class="nav-li"> <div class="tit">導航</div> <ul> <li> 二級導航 <div class="subnav"> <div class="subnav-item">三級導航</div> <div class="subnav-item">三級導航</div> <div class="subnav-item">三級導航</div> <div class="subnav-item">三級導航</div> </div> </li> <li>二級導航</li> <li>二級導航</li> <li>二級導航</li> </ul> </div> <div class="nav-li">導航</div> <div class="nav-li">導航</div> <div class="nav-li">導航</div> <div class="nav-li"> <div class="tit">導航</div> <ul> <li> 二級導航 <div class="subnav"> <div class="subnav-item">三級導航</div> <div class="subnav-item">三級導航</div> <div class="subnav-item">三級導航</div> <div class="subnav-item">三級導航</div> </div> </li> <li>二級導航</li> <li>二級導航</li> <li>二級導航</li> </ul> </div> </div> </div> </body> </html>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/79781.html
標籤：Html/Css
上一篇：float浮動以及案例演示
下一篇：css的網頁布局案例