css样式布局中position的那些事儿
哎,页面布局及设计开发,对于一个一直从事后台开发来说屌丝来说,确实是件很费时、费力,很艰难的一件事。
今晚是想实现把多张重叠在一起,或是标记一张图片中不同的位置然后赋以超链接。花了一晚上的时间,才算初步搞定,大致明白了以下几个css属性用法。
【1】将标签设置为float,和同事讨论:
html的标签有块级和行级(至于那些是块级,可百度之),每个块级会占用html文档的一行(之所以是一行,是因为块级后面会带有换行)。如果把块级标签设置为float时,则标签:(1)脱离原来父级标签。(2)可以在一行进行显示。
【2】position设置为fixed。
fixed是相对于整个浏览器。有兴趣的同学可以试验下,把一个有大小的标签设置为fixed,缩放浏览器,使浏览器产生滚动条(上下或左右),当拉动滚动条时,被设置成fixed的标签是不会改变其位置的。
【3】position设置为absolute。
absolute是相对于最近的父亲标签。依然是上面的那个试验,当拉动滚动条时,被设置成absolute的标签也会跟着html文档位置的改变而变动。
【4】position设置为relative。
relative是相对于原来该标签的位置。
下面结合今晚我做是试验图,来看下效果:
(1)a线是absolute
(2)b线是fixed。
上面图我主要的目的是,把圆盘中make1~8的位置给标记出来,然后给以超链接,具体的代码为:
<!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" /> <!--<link type="text/css" rel="stylesheet" media="all" href="webCss.css">--> <title>mydw</title> <style> body { background:#CCCCCC; } a.makeR1{ left:150px; top:45px; width:70px; height:80px;} a.makeR2{ right:150px; top:45px;width:70px; height:80px;} a.makeR3{ left:65px; top:135px; width:70px; height:80px;} a.makeR4{ right:65px; top:135px;width:70px; height:80px;} a.makeR5{ left:65px; top:265px; width:70px; height:80px;} a.makeR6{ right:65px; top:265px;width:70px; height:80px;} a.makeR7{ right:215px; top:365px;width:70px; height:60px;} a.makeR8{ right:180px; top:160px;width:137px; height:137px;} .makeR9{ right:180px; top:160px;width:137px; height:137px;} .roundMakeBox{ position:fixed; z-index:99992; text-align:center; left:50%; margin-left:-250px; width:499px; height:501px; border:1px solid blue; } .roundLink{ position:relative; bottom:0px;z-index:99993;border:1px solid green;} .roundLink a{ display:block;position:absolute;z-index:99994;border:1px solid red;background:#FFFF00;} #img1{ display:block;position:absolute;z-index:99994;border:1px solid red;} </style> </head> <body> <div class="roundMakeBox"> <div class="roundLink"> <img src="makeRound.png"> <a href="#" class="makeR1">makeR1</a> <a href="#" class="makeR2">makeR2</a> <a href="#" class="makeR3">makeR3</a> <a href="#" class="makeR4">makeR4</a> <a href="#" class="makeR5">makeR5</a> <a href="#" class="makeR6">makeR6</a> <a href="#" class="makeR7">makeR7</a> <a href="#" class="makeR8">makeR8</a> <img id="img1" class="makeR9" src="LOGObg.png" /> </div> </div> </div> </body> </html>
【1】关于roundMakeBox居中的问题:
left:50%; margin-left:-250px;left:50%是标签的左边缘移动到父标签的50%处(一半),那为什么又要margin-left -250px呢?
因为当我left50%时,标签的左边缘虽然到了50%处,但整个的标签确实向右偏移了。我们所谓的标签居中,是想标签中心位置在父标签的中心位置处,left50%显然是多移动了标签一般的位置,原来标签是500px,因此就margin-left-250px了。
【2】关于makeR中每个a的像素位置,是怎么得到的?
弄清楚position的absolute后,剩下的就是测量位置了(用什么测?我是用尺,不知道是否还有其他更好的方式)。
好了,以上是我的理解,不知是否有表达清楚,或是我理解的有偏差,看官需要自己去实验测试。
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。