前端笔记----定位
生活随笔
收集整理的這篇文章主要介紹了
前端笔记----定位
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
一.定位分三種：相對定位，絕對定位和固定定位。
1.相對定位：元素所占據(jù)的文檔流的位置保留，元素本身相對自身原位置進行偏移；
如下：
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>定位</title><style>.box1{margin: 50px auto;border: 1px solid red;width: 100px;height: 100px;}.box2{width: 50px;;height: 50px;border: 1px solid green;background: blue; position: relative; # 相對定位left: 50px;top: 50px;}</style> </head> <body><div class="box1"><div class="box2"></div></div> </body> </html>定位前： ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 定位后：
2.絕對定位：元素脫離文檔流，不占據(jù)位置，漂浮在文檔流的上方，相對于父級元素進行定位；
前提是父級元素設(shè)置了定位，一般是設(shè)置相對定位；如果找不到就會相對于body進行定位，相當(dāng)于固定定位。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>定位</title><style>.box1{margin: 50px auto;border: 1px solid red;width: 100px;height: 100px;position: relative; # 父元素設(shè)置了定位}.box2{width: 50px;;height: 50px;border: 1px solid green;background: blue;position: absolute; # 子元素設(shè)置相對定位left: 50px;top: 50px;}</style> </head> <body><div class="box1"><div class="box2"></div></div> </body> </html>結(jié)果：
3.固定定位：元素脫離文檔流，不占據(jù)文檔流的位置，漂浮在文檔流的上方，其相對于瀏覽器窗口進行定位。
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>定位</title><style>.box1{margin: 50px auto;border: 1px solid red;width: 100px;height: 100px;}.box2{width: 50px;;height: 50px;border: 1px solid green;background: blue; position: fixed; # 固定定位left: 50px;top: 50px; }</style> </head> <body><div class="box1"><div class="box2"></div></div> </body> </html>結(jié)果：box2相對于窗口定位。
?
轉(zhuǎn)載于:https://www.cnblogs.com/cwp-bg/p/7594575.html
總結(jié)
以上是生活随笔為你收集整理的前端笔记----定位的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 爱绿护绿宣传语30句
- 下一篇： Angular最新教程-第六节编写响应式