css样式布局中position的那些事儿_html/css_WEB-ITnose-html教程-PHP中文网

css样式布局中position的那些事儿_html/css_WEB-ITnose

php中文网

发布： 2016-06-24 11:56:29

原创

1222人浏览过

哎，页面布局及设计开发，对于一个一直从事后台开发来说?丝来说，确实是件很费时、费力，很艰难的一件事。

今晚是想实现把多张重叠在一起，或是标记一张图片中不同的位置然后赋以超链接。花了一晚上的时间，才算初步搞定，大致明白了以下几个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">		@@##@@		<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>		@@##@@	</div></div></div></body></html>

登录后复制

另外

【1】关于roundMakeBox居中的问题：