CSS之position
生活随笔
收集整理的這篇文章主要介紹了
CSS之position
小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
?
?
fiexd:固定在頁面的某個(gè)位置relative+absolute:2者之間的相對(duì)定位
?
?
層疊樣式表
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body> <div onclick="GoTop();" style="width:50px;height: 50px;background-color: aqua;color:white; position: fixed; bottom:20px; right:20px; ">返回頂部</div> <!--position 層疊樣式表--> <!--position: fixed;--> <!--top:0;--> <!--right:0 ;--> <div style="height: 5000px;background-color: purple"></div> <script>function GoTop(){document.body.scrollTop=0;} </script> </body> </html>?層疊樣式表2
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title><style>.pg-header{background-color: purple;height: 48px;position: fixed;top:0;left:0;right: 0;}.pg-body{background-color: green;height: 3000px;margin-top: 50px;}</style> </head> <body> <div class="pg-header">頭部</div> <div class="pg-body">內(nèi)容</div> </body> </html>?
?
?
?層疊樣式表3
?
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body> <div style="position: relative;width:500px;height:200px;border:1px solid red;margin: 0 auto;"><div style="position: absolute;left: 0;bottom: 0;width:50px;height: 50px;background-color: blue;"></div> </div> <div style="position: relative;width:500px;height:200px;border:1px solid red;margin: 0 auto;"><div style="position: absolute;left: 0;bottom: 0;width:50px;height: 50px;background-color: yellow;"></div> </div> <div style="position: relative;width:500px;height:200px;border:1px solid red;margin: 0 auto;"><div style="position: absolute;right: 0;bottom: 0;width:50px;height: 50px;background-color: orangered;"></div> </div> <div style="position: relative;width:500px;height:200px;border:1px solid red;margin: 0 auto;"><div style="position: absolute;left: 0;bottom: 0;width:50px;height: 50px;background-color: pink;"></div> </div> <div style="position: relative;width:500px;height:200px;border:1px solid red;margin: 0 auto;"><div style="position: absolute;left: 0;bottom: 0;width:50px;height: 50px;background-color: brown;"></div></div> </body> </html>?
?
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><title>Title</title> </head> <body> <div style="z-index:10;position:fixed;top:50%;left:50%;margin-left:-250px;margin-top:-200px; background-color:white;height: 400px;width:500px"><input type="text"/><input type="text"/><input type="text"/> </div><div style="z-index:9;position:fixed;background-color: black; top:0; bottom:0; right:0; left:0; opacity:0.6; /*opacity:0.6;透明度*/ ">測(cè)試標(biāo)簽1</div> <div style="z-index:8;height: 6000px;background-color: orange">測(cè)試標(biāo)簽2</div> </body> </html>?
轉(zhuǎn)載于:https://www.cnblogs.com/nodchen/p/8453253.html
總結(jié)
以上是生活随笔為你收集整理的CSS之position的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 如何把微信文章中的语音/音乐下载下来
- 下一篇： 深入浅出CSS（二）：关于雪碧图、bac