日韩av黄I国产麻豆传媒I国产91av视频在线观看I日韩一区二区三区在线看I美女国产在线I麻豆视频国产在线观看I成人黄色短片

歡迎訪問(wèn) 生活随笔！

生活随笔

當(dāng)前位置： 首頁(yè) >

css案例学习之relative与absolute

發(fā)布時(shí)間：2025/3/21 39 豆豆
生活随笔 收集整理的這篇文章主要介紹了 css案例学习之relative与absolute 小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

代碼

<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head><title>absolute屬性</title><style type="text/css">body {margin: 20px;font-family: Arial;font-size: 12px;}#father {background-color: #a0c8ff;border: 1px dashed #000000;padding: 15px;position: relative;}#father div {background-color: #fff0ac;border: 1px dashed #000000;padding: 10px;}#block2 {position: absolute;top: 0px;right: 0px;}</style> </head><body><div id="father"><div>Box-1</div><div id="block2">Box-2</div><div>Box-3</div></div> </body></html>

說(shuō)明

relative是相對(duì)于瀏覽器定位的，absolute是相對(duì)于relative定位的。

它們都要結(jié)合top、right、left、bottom屬性來(lái)使用。

代碼

<!DOCTYPE html PUBliC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head><title>absolute屬性</title><style type="text/css">body {margin: 20px;font-family: Arial;font-size: 12px;}#father {background-color: #a0c8ff;border: 1px dashed #000000;padding: 15px;position: relative;top:20px; /*相對(duì)于瀏覽器*/left:10px;}#father div {background-color: #fff0ac;border: 1px dashed #000000;padding: 10px;}#block1 {position: absolute;top: 0px;right: 0px;}#father2 {background-color: #a0c8ff;border: 1px dashed #000000;padding: 15px;position: relative;top:10px; /*相對(duì)于瀏覽器，不過(guò)基于現(xiàn)有的位置。*/}#father2 div {background-color: #fff0ac;border: 1px dashed #000000;padding: 10px;}#block2 {position: absolute;top: 0px;right: 0px;}</style> </head><body><div id="father"><div>Box-1</div><div id="block1">Box-2</div><div>Box-3</div></div><div id="father2"><div>Box-1</div><div id="block2">Box-2</div><div>Box-3</div></div> </body></html>

說(shuō)明

absolute永遠(yuǎn)是基于父relative元素定位。relative基于現(xiàn)有的位置，基于瀏覽器定位。


本文轉(zhuǎn)自TBHacker博客園博客，原文鏈接：http://www.cnblogs.com/jiqing9006/p/4998426.html，如需轉(zhuǎn)載請(qǐng)自行聯(lián)系原作者

總結(jié)

以上是生活随笔為你收集整理的css案例学习之relative与absolute的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。