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

今晚是想实现把多张重叠在一起。或是标记一张图片中不同的位置然后赋以超链接。花了一晚上的时间，才算初步搞定，大致明确了下面几个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. CF988 D. Points and Powers of Two【hash/数学推理】

    [链接]:CF [题意]:从一堆数中选一个最大子集,使得任意两个数相减的绝对值都是2的幂. [分析]:首先很难的一点,需要想到子集最多只能有三个,四个及以上的子集一定不存在(可以证明).当有三个元素时 ...

  2. HDU 1308 What Day Is It?（模拟，日期）

    解题报告:输入一个年月日,让你求出那一天是星期几,但是做这题之前必须先了解一点历史.首先在1582年之前,判断是否是闰年的标准是只要能被四整除就是闰年, 然后在1752年9月2号的后的11天被抹去了, ...

  3. 51nod 1459 迷宫游戏【最短路拓展】

    1459 迷宫游戏 基准时间限制:1 秒 空间限制:131072 KB   你来到一个迷宫前.该迷宫由若干个房间组成,每个房间都有一个得分,第一次进入这个房间,你就可以得到这个分数.还有若干双向道路连 ...

  4. Codeforces 702C Cellular Network(二分)

    题目链接:http://codeforces.com/problemset/problem/702/C 题意: 在数轴上有N个城市和M个信号塔,给你这N个城市以及M个塔在数轴上的位置,求M个塔可以覆盖 ...

  5. HYSBZ - 2038 小Z的袜子 （莫队算法）

    A1206. 小Z的袜子 时间限制:1.0s   内存限制:512.0MB   总提交次数:744   AC次数:210   平均分:44.44 将本题分享到:        查看未格式化的试题    ...

  6. 最小生成树（Kruskal)(并查集)

    最小生成树 时间限制: 1 Sec  内存限制: 64 MB提交: 11  解决: 2[提交][状态][讨论版] 题目描述 某个宇宙帝国有N个星球,由于宇宙的空间是三维的,因此每个星球的位置可以用三维 ...

  7. 16、Django实战第16天：优化url

    今天完成的是一个优化url.... 前面我们所有的url都是配置在一个mxonline.urls.py中.因为我们根据项目实际情况配置了多个app,那么我们相应的url是可以配置在自己的app中的,这 ...

  8. 14、Django实战第14天：列表筛选功能

    今天完成的是点击这些条件进行机构的筛选 首先来完成城市:当用户点击城市的时候,我们自动给它加一个参数(city.id) 编辑organization.views.py 刷新页面,发现筛选功能已经OK了 ...

  9. 对mysql数据库表的相关操作

    虫师博客(Python使用MySQL数据库(新)): https://www.cnblogs.com/fnng/p/3565912.html 1.更改表的结构,增加一个字段放置新增的属性 alter ...

  10. [BZOJ 3571] 画框

    Link: BZOJ 3571 传送门 Solution: 和 BZOJ2395 的建模完全相同,(BZOJ2395 题解传送门) 仅仅是将其中的基础问题由最小生成树改成了二分图最大完美匹配 只要将原 ...