Heim >Web-Frontend >HTML-Tutorial >div布局中position的含义??CSS+DIV_html/css_WEB-ITnose
div布局中position的含义??CSS+DIV_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 12:32:591116Durchsuche
最近需要看看CSS+DIV的相关资料，纠结在div的布局方面，主要原因是不懂position的含义
在网上找到一个好的解说看了一下就明白了。现在贴出来给大家看看。
<!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> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>Div + CSS Example, Wayhome's Blog</title> <style type="text/css"> <!-- body,td,th{font-family:Verdana;font-size:9px;} --> </style></head> <body> <div style="position:absolute; top:5px; right:20px; width:200px; height:180px; background:#00FF00;"> position: absolute;<br /> top: 5px;<br /> right: 20px;<br /> <div style="position:absolute; left:20px; bottom:10px; width:100px; height:100px; background:#00FFFF;"> position: absolute;<br /> left: 20px;<br /> bottom: 10px;<br /> </div> </div> <div style="position:absolute; top:5px; left:5px; width:100px; height:100px; background:#00FF00;"> position: absolute;<br /> top: 5px;<br /> left: 5px;<br /> </div> <div style="position:relative; left:150px; width:300px; height:50px; background:#FF9933;"> position: relative;<br /> left: 150px;<br /> <br /> width: 300px; height: 50px; <br /> </div> <div style="text-align:center; background:#ccc;"> <div style="margin:0 auto; width:600px; background:#FF66CC; text-align:left;"> <p>1</p> <p>2</p> <p>3</p> <p>4</p> <p>5</p> <div style="padding:20px 0 0 20px; background:#FFFF00;"> padding: 20px 0 0 20px; <div style="position:absolute; width:100px; height:100px; background:#FF0000;">position: <span style="color:#fff; ">absolute</span>;</div> <div style="position:relative; left:200px; width:500px; height:300px; background:#FF9933;"> position: <span style="color:blue;">relative</span>;<br /> left: 200px;<br /> <br /> width: 300px;<br /> height: 300px;<br /> <div style="position:absolute; top:20px; right:20px; width:100px; height:100px; background:#00FFFF;"> position: absolute;<br /> top: 20px;<br /> right: 20px;<br /></div> <div style="position:absolute; bottom:20px; left:20px; width:100px; height:100px; background:#00FFFF;"> position: absolute;<br /> bottom: 20px;<br /> left: 20px;<br /> </div> </div> </div> </div> </div> </body> </html> 文章出处：http://www.jb51.net/article/13256.htm
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：CSS DIV水平居中问题_html/css_WEB-ITnoseNächster Artikel：CSS+DIV布局中注意的几个问题_html/css_WEB-ITnose