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

今晚是想实现把多张重叠在一起。或是标记一张图片中不同的位置然后赋以超链接。花了一晚上的时间，才算初步搞定，大致明确了下面几个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. hdu 5179(数位DP||打表)

    beautiful number Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java/Others) ...

  2. SecureCRT的安装、介绍、简单操作

    网上看到一篇名为<SecureCRT的使用方法和技巧(详细使用教程)>的secureCRT教程,可能软件版本与我不一样我安装的是8.1. 原文来源:http://www.jb51.net/ ...

  3. 一个LaTeX 中文文档的简单而实用的模板

    网上找的一个latex中文模板,感觉很简单,在我机器上有点小问题,完善记录一下. %要运行该模板,LaTex需要安装CJK库以支持汉字. %字体大小为12像素,文档类型为article %如果你要写论 ...

  4. 【ZOJ】3785 What day is that day? ——KMP 暴力打表找规律

    转自:http://www.cnblogs.com/kevince/p/3887827.html 首先声明一下,这里的规律指的是循环,即找到最小循环周期. 这么一说大家心里肯定有数了吧,“不就是nex ...

  5. 【状压基础题】poj3254 Corn Fields

    题目大意 :农夫约翰有n*m块地,其中一些地荒掉了.玉米是一种傲娇的植物,种在相邻的地里会导致不孕不育.求所有种法数对100000000求余. 读入:第一行一个n一个m, 接下来是一个n行m列的矩形, ...

  6. golang笔记：net/smtp

    跟go语言的net/smtp斗争了一天,记录下历程.   先用最标准的例子 host := net.JoinHostPort(hostname, port) auth := smtp.PlainAut ...

  7. 15、Flask实战第15天：Flask-WTF

    WTForms表单验证基本使用 Flask-WTF是简化了WTForms操作的一个第三方库.WTForm表单的两个主要功能是验证用户提交数据的合法性以及渲染模板.当然还包括一些其他的功能:CSRF保护 ...

  8. [BZOJ 1145] 图腾totem

    Link:https://www.lydsy.com/JudgeOnline/problem.php?id=1145 Solution: 算是一道神题了吧 设 f(abcd)为:当选出的四个数相对大小 ...

  9. Codeforces 786A Berzerk（博弈论）

    [题目链接] http://codeforces.com/problemset/problem/786/A [题目大意] 有两个人,每个人有一个数集,里面有一些数,现在有一个环,有个棋子放在1, 有个 ...

  10. 【可持久化Trie】【set】bzoj3166 [Heoi2013]Alo

    枚举每个数,计算以其为次大数的最大区间,显然,只需要用这个区间的答案 对 答案进行更新即可. 找到每个数右侧.左侧第1.2个比它大的数,然后分类讨论一下即可. 找到的过程中把数sort以后,从大到小把 ...