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

今晚是想实现把多张重叠在一起。或是标记一张图片中不同的位置然后赋以超链接。花了一晚上的时间，才算初步搞定，大致明确了下面几个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. yii2中判断值是否存在二维数组中

    //在yii2中,在类里面的函数,可以不加action $arr = array( array('a', 'b'), array('c', 'd') ); in_array('a', $arr); / ...

  2. webpack + react 前端工程化实践和暂不极致优化

    技术结构 webpack + react + react-router 功能实现 关于打包 1.基于react-router的自定义打包code split.2.分包异步按需加载.3.CommonsC ...

  3. zabbix获取到的数值自定义单位

    1) 查找php文件 # find / -name "func.inc.php" /usr/share/zabbix/include/func.inc.php 2)修改文件 #vi ...

  4. python操作数据库的几种方式

    参照python 操作mysql python-mysqldb : http://www.cnblogs.com/wupeiqi/articles/5095821.html (python3 不支持) ...

  5. React中super(props)和super()以及不写super()的区别

    一.constructor()和super()的基本含义 constructor() -- 构造方法 这是ES6对类的默认方法,通过new命令生成对象实例自动调用的方法.并且,该方法是类中必须要有的, ...

  6. 模板—算法—整体二分（区间k小值）

    模板—算法—整体二分(区间k小值) Code: #include <cstdio> #include <algorithm> using namespace std; #def ...

  7. 训练指南 UVALive - 3126（DAG最小路径覆盖）

    layout: post title: 训练指南 UVALive - 3126(DAG最小路径覆盖) author: "luowentaoaa" catalog: true mat ...

  8. JavaScript中的map方法

    假设有一个函数f(x)=x²;作用在一个数组[1,2,3,4,5,6,7,8,9],通常我们会用遍历的方法来实现. function f(x){ return x * x; } var arr = [ ...

  9. [Codeforces 10E] Greedy Change

    Brief Introduction: 给你一些种类的硬币,用最少的硬币数表示X 求最小的使贪心算法错误的X Algorithm: 一道论文题,<A Polynomial-time Algori ...

  10. ZOJ 3949 Edge to the Root（树形DP）

    [题目链接] http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemCode=3949 [题目大意] 给出一棵根为1的树,每条边边长为1,请你 ...