前端学习（226）:定位使用
生活随笔
收集整理的這篇文章主要介紹了
前端学习（226）:定位使用
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/ html4/strict.dtd">
<html><head><meta http-equiv="content-type" content="text/html; charset=utf-8"><title>CSS定位</title></head><body><span>藍(lán)色的div位于正常文檔流中，紅色的div脫離了文檔里</span><div style="width: 100px;height: 100px;border: 3px solid blue;"></div><div style="width: 100px;height: 100px;border: 3px solid red;position: absolute;top: 50px;left: 50px;"></div><span>這里應(yīng)該會(huì)被紅色div覆蓋的</span><hr /><span>綠色div和粉色div都設(shè)置成絕對(duì)定位div，但粉色div它的父元素是綠色div，所以粉色div計(jì)算相對(duì)位置是根據(jù)綠色div的原點(diǎn)計(jì)算的</span><div style="width: 200px;height: 200px;border: 3px solid green; position: absolute;top: 200px;left: 100px;"><div style="width: 100px;height: 100px;border: 3px solid pink; position: absolute;top: 30px;left: 30px;"></div></div></body>
</html>
運(yùn)行結(jié)果
總結(jié)
以上是生活随笔為你收集整理的前端学习（226）:定位使用的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： 第六十四期：聊聊原子变量、锁、内存屏障那
- 下一篇： 2017年html5行业报告,云适配发布