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

今晚是想实现把多张重叠在一起。或是标记一张图片中不同的位置然后赋以超链接。花了一晚上的时间，才算初步搞定，大致明确了下面几个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后。剩下的就是測量位置了（用什么測？我是用尺，不知道是否还有其它更好的方式）。

好了。以上是我的理解，不知是否有表达清楚。或是我理解的有偏差，看官须要自己去实验測试。

css样式布局中position的那些事儿的更多相关文章

  1. CSS+DIV布局中absolute和relative区别

    原文:http://developer.51cto.com/art/201009/225201.htm 这里向大家简单介绍一下CSS+DIV布局中absolute和relative属性的用法和区别,定 ...

  2. CSS网页布局中易犯的30个小错误

    即使是CSS高手,也难免在书写CSS代码的时候出一些小错误,或者说,任何一种代码都是如此.小错误却往往造成大问题,浪费很多无辜的时间来调试和排错.查看下面这份CSS网页布局中易犯的10个小错误,努力的 ...

  3. 在HTML页面布局中,position的值有几种,默然的值是什么

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  4. css样式表中四种属性选择器

    学习此连接的总结http://developer.51cto.com/art/201009/226158.htmcss样式表中四种属性选择器1> 简易属性 tag[class]{ font-we ...

  5. 一个DOM元素同时拥有多个类名时的样式产生冲突时 属性取决于css样式表中后读取到的属性

    如果一个DOM元素包含多个类名,其中的两个类名的属性产生冲突,并不是根据htnl中类名的顺序来决定DOM元素的属性, 而是根据css样式中的顺序来决定DOM元素的属性,它取决于css样式表中后读取到的 ...

  6. tp3.2替换模板中如果需要替换的图片在css样式表中怎么办？

    因为标签中的 style 定义的样式可直接覆盖 css样式表中定义的样式,所以可以在要替换的标签中用 style 直接定义样式,具体代码如下: <div class="aboutbg& ...

  7. DIV CSS布局中position属性用法深入探究

    本文向大家描述一下DIV CSS布局中的position属性的用法,position属性主要有四种属性值,任何元素的默认position的属性值均是static,静态.这节课主要讲讲relative( ...

  8. 常用css样式(布局)

    兼容css3新属性 在css3中,我们可以使用prefixfree.min.js这个插件来自动为css3的相关属性加上兼容浏览器属性,使我们不用为每个css3新属性再加上属性(需要用到大量css3的项 ...

  9. css样式表中的样式覆盖顺序

    刚才写zenktodo的时候,通过动态添加class的方式修改一个div的样式,总是不起作用. #navigator { height: 100%; width: 200; position: abs ...

随机推荐

  1. 《锋利的jQuery》读书要点笔记6——制作商城网页：结构和样式设计

    第8章 用jQuery打造个性网站 做一个购物网站并用jQuery来完善.大体步骤是: 收集素材 确定网站结构 A. 文件结构,imagea文件夹用来存放将要用到的图片,styles文件夹存放CSS, ...

  2. [mysql] 表去重

    select *, count(distinct content) from comment2 group by content

  3. Error converting bytecode to dex: Cause: java.lang.RuntimeException: Exception parsing classes

    http://blog.csdn.net/xx326664162/article/details/51859106 总算有个靠谱的了

  4. sql developer 自定义快捷键

  5. Python RE模块中search()和match()的区别

    match()函数只检测RE是不是在string的开始位置匹配, search()会扫描整个string查找匹配: 也就是说match()只有在0位置匹配成功的话才有返回, 如果不是开始位置匹配成功的 ...

  6. hibernate中session的线程安全问题

    Hibernate的基本特征是完成面向对象的程序设计语言到关系数据库的映射,在Hibernate中使用持久化对象PO(Persistent Object)完成持久化操作,对PO的操作必须在Sessio ...

  7. [UOJ206]Gap

    子任务$1$:直接找到最大值后从两边开始找,一步一步从左右到中间确定所有数,调用次数是$\left\lceil\dfrac n2\right\rceil$ 子任务$2$:先找到最大值$mx$和最小值$ ...

  8. 快速创建Django验证码

    # 生成随机验证码图片 import stringfrom random import randint, samplefrom PIL import Image, ImageDraw, ImageFo ...

  9. 从cmd连接mysql数据库控制台

    在cmd中进入mysql安装目录的bin目录然后执行命令 mysql -uuser -ppassword database比如用户名为root,密码为mysql,数据库为test命令如下mysql - ...

  10. 如何用JavaScript重定向到另一个网页?

    可以使用 window.location.replace() 方法重定向到另一个页面.相对于 window.location.href ,replace的优势是不会跳转记录并不会保留在历史会话中,这就 ...