css案例学习之relative与absolute
生活随笔
收集整理的這篇文章主要介紹了
css案例学习之relative与absolute
小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.
代碼
<!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>說明
relative是相對于瀏覽器定位的，absolute是相對于relative定位的。
它們都要結合top、right、left、bottom屬性來使用。
代碼
<!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; /*相對于瀏覽器*/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; /*相對于瀏覽器，不過基于現(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>說明
absolute永遠是基于父relative元素定位。relative基于現(xiàn)有的位置，基于瀏覽器定位。
本文轉自TBHacker博客園博客，原文鏈接：http://www.cnblogs.com/jiqing9006/p/4998426.html，如需轉載請自行聯(lián)系原作者
總結
以上是生活随笔為你收集整理的css案例学习之relative与absolute的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Java 获得方法调用者名称
- 下一篇： LNMP架构之环境搭建