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

今晚是想实现把多张重叠在一起。或是标记一张图片中不同的位置然后赋以超链接。花了一晚上的时间，才算初步搞定，大致明确了下面几个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. 对json同属性字段压缩

    function jsonPack(obj,ifOrder) { var result = [] // var nameArr = Object.keys(obj[0]); 非有序遍历 var nam ...

  2. 关于ros stage与navigation仿真总结5月16号

    主要总结内容 在costmap里是怎么判断机器人和障碍物碰撞了 stage_ros包输入输出,stage是怎么回事 rviz 中footprint和stage中position怎么联系到一起 voxe ...

  3. Laravel跳转回之前页面，并携带错误信息

    用Laravel5.1开发项目的时候,经常碰到需要携带错误信息到上一个页面,开发web后台的时候尤其强烈. 直接上: 方法一:跳转到指定路由,并携带错误信息 return redirect('/adm ...

  4. PHP实现innodb的数据回滚

    //实例化的数据库对象$model = new Model();//开启事务$model->startTrans();//默认结果$judge = true;//数据操作$sql1 =" ...

  5. [thinkphp]验证码不显示： 图像因存在错误无法显示

    我只想说,该死的BOM FUKKKKK!!!!!!!!

  6. 如何学习web开发环境搭建和脚手架

    Web前端的学习路线 第一阶段: HTML+CSS: HTML进阶.CSS进阶.div+css布局.HTML+css整站开发. JavaScript基础: Js基础教程.js内置对象常用方法.常见DO ...

  7. NYOJ 914 Yougth的最大化【二分/最大化平均值模板/01分数规划】

    914-Yougth的最大化 内存限制:64MB 时间限制:1000ms 特判: No 通过数:3 提交数:4 难度:4 题目描述: Yougth现在有n个物品的重量和价值分别是Wi和Vi,你能帮他从 ...

  8. 组合数学+错排问题【p4071】[SDOI2016]排列计数

    Description 求有多少种长度为 n 的序列 A,满足以下条件: 1 ~ n 这 n 个数在序列中各出现了一次 若第 i 个数 A[i] 的值为 i,则称 i 是稳定的.序列恰好有 m 个数是 ...

  9. Linux命令之dd

    dd [OPERAND] dd 选项 复制一个文件,根据[OPERAND]进行转换和格式化 (1). OPERAND参数 说明1:dd的选项只有’--help’和’--version’,也就是帮助与版 ...

  10. Eclipse 教程 | 菜鸟教程

    http://www.runoob.com/eclipse/eclipse-charset.html