css相对定位和绝对定位

<html>
<head>
<title>css相对定位和绝对定位</title>
<style type = "text/css" >
	body,div {
		margin:0;
		padding:0;
		height:2000px;
	}
	#div1 {
 		width:200px;
		height:200px;
		background-color: red;
		position:absolute; 
		z-index:2;
		/*
			left:100px; 
			top:20px;
			1.采用相对定位后,left和right, top和bottom只能设置一个
			2.相对定位,相对于原来的位置而言。设置相对定位的元素依然会占用原                           来的空间。仍在标准流中。
		*/
	}
	#div2 {
		width:200px;
		height:200px;
		background-color:#369369;
		position:absolute;
		left:20px;
		top:20px;
		z-index:-1;
		 /*
			3.绝对定位,针对body页面左上角而言的。left看不出来的,
			  只有top,bottom才可以看出与relative的区别
			4.设置为绝对定位的元素不会占用原来的空间,会脱离标准流
		*/
	}
	#div3 {
		width:200px;
		height:200px;
		background-color:blue;
		/* 
		position:fixed;
		left:20px;
		top:50px;

			5.固定定位,与绝对定位一样都会脱离标准流
			6.固定定位,针对浏览器窗口而言的。absolute针对body(0,0)而言的。
		*/
	}

		/*
			重叠元素的堆叠顺序 z-index ;前提是只有设置了以上三种定位才有用。
			设置的数值越大,堆叠越在上层。也可以用负值。

		*/
</style>
<meta charset = "utf-8" />
<!--<link rel = "stylesheet" style = "text/css" href = "style/css.css" />-->
</head>
<body>
	<div id = "div1" >div1</div>
	<div id = "div2" >div2</div>
	<div id = "div3" >div3</div>

</body>
</html>
时间: 01-05

css相对定位和绝对定位的相关文章

div+css相对定位和绝对定位

今天突然发现自己在布局的时候思路很乱,于是毅然决然的想要重新的理一下自己的布局思路,今天就先从定位开始吧~ 绝对定位(absolute):将被赋予此定位方法的对象从文档流中拖出,如果对象的父级没有设置定位属性,则依据body对象左上角作为参考进行定位.绝对定位对象可层叠,层叠顺序可通过z-index属性控制,z-index值为无单位的整数,大的在最上面,可以有负值(目前负值FF不支持). 同时z-index仅能在定位元素上奏效!!! 相对定位(relative):对象不可层叠,依据left,ri

CSS——相对定位、绝对定位、固定定位

相对定位: 当元素被设置相对定位或是绝对定位后,将自动产生层叠,他们的层叠级别自然的高于文本流,除非设置其z-index值为负值. 并且我们发现当相对定位元素进行位移后,表面来看已经脱离了文本流,但是实际上在本文流中还为原来的相对对定位留下了原有的总宽与总高. 绝对定位: 相对定位只可以在文本流中进行位置的上下左右的移动,同样存在一定的局限性,虽然他的表现区脱离了文本流,但是在文本流却依然为其保留了一席之地,这个位置不随他的移动而改变. 如果希望文本流抛弃这个部分就需要用到绝对定位.绝对定位不光

CSS相对定位与绝对定位详解

相对定位和绝对定位,不改变元素的大小形状,只改变元素的位置. 相对定位和绝对定位是通过position属性来控制的,position属性的值为下面几种: 值 描述 absolute 使元素绝对定位,相对于static定位以外的最近的一个祖先元素进行定位.元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定. relative 使元素相对定位,相对于自己的正常位置进行定位. fixed 使元素绝对定位,相对于浏览器窗口进行定位.元素的位置通过 “lef

CSS相对定位、绝对定位

CSS定位属性:position. 定位的基本思想:定义元素框相对于其正常位置应该出现的位置,或者相对于父元素.另一个元素或浏览器窗口本身的位置. position属性值:static.relative.absolute.fixed. 以下所有测试在Firefox40.0下进行. 所用到基本代码: 1 <style> 2 body{ 3 margin: 30px 0 0 30px; 4 padding: 0; 5 } 6 .div1{ 7 width: 200px; 8 height: 200

css 相对定位与绝对定位

相对定位的规律: 使用相对定位的盒子,会相对于它原来的位置,通过偏移指定的距离,到达新的位置. 使用相对定位的盒子仍在标准流中,它对父亲和兄弟盒子都没有任何影响. 绝对定位的规律: 使用绝对定位的盒子以它的“最近”的一个“已经定位”的“祖先元素”为基准进行偏移.如果没有已经定位的祖先元素,那么会以浏览器窗口为基准进行定位. 绝对定位的框从标准流中脱离,这意味它们对其后的兄弟盒子的定位没有影响,其他的盒子就好像这个盒子不存在一样.

CSS定位深入理解 完全掌握CSS定位 相对定位和绝对定位

其实前面的标准流和浮动流都很理解,就是定位不太好理解,特别是相对定位和绝对定位,很多刚开始学的同学不好区分.因此这里,小强老师和大家一起分享CSS定位的学习. 通过我们前面的学习,我们网页布局方法: 1. 标准流   (最稳定) 2. 浮动流   (float 其次) 3. 定位流    ( 稳定性最后) 定位是完全脱离标准流的一种布局方式. 其实前面的标准流和浮动流都很理解,就是定位不太好理解,特别是相对定位和绝对定位,很多刚开始学的同学不好区分.因此这里,小强老师和大家一起分享CSS定位的学

CSS定位(CSS定位概述、相对定位、绝对定位、浮动)

CSS 定位属性 CSS 定位属性允许你对元素进行定位. 属性 描述 position 把元素放置到一个静态的.相对的.绝对的.或固定的位置中. top 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移. right 定义了定位元素右外边距边界与其包含块右边界之间的偏移. bottom 定义了定位元素下外边距边界与其包含块下边界之间的偏移. left 定义了定位元素左外边距边界与其包含块左边界之间的偏移. overflow 设置当元素的内容溢出其区域时发生的事情. clip 设置元素的

详解CSS的相对定位和绝对定位

原文地址:http://www.3lian.com/edu/2015/01-31/191131.html 详解CSS的相对定位和绝对定位 感谢 3lian8 的投递 时间:2015-01-31 来源:cmsgood zcp CSS的相对定位和绝对定位通常情况下,我们元素的position属性的值默认为static 就是没有定位,元素出现在正常的文档流中,,这个时候你给这个元素设置的left,right,bottom,top这些偏移属性都是没有效果的,不会生效,比如你设置一个距离左边距偏移100p

辛星和你彻底搞清CSS中的相对定位和绝对定位

前面我在解读CSS中也说过了关于相对定位和绝对定位的问题,无奈还是有些童鞋表示迷茫,于是另开一篇博客,来详细解读相对定位和绝对定位,希望能够以我的点点星光,让后来者少走弯路. 所谓相对定位,就是设置为相对定位的元素会偏移某个距离,元素仍然保持原来的样式,它会保留该HTML元素的空间,比如我们看如下代码: .demo{ position: relative; width:50px; height: 50px; left:50px; } 它会出现在相对原来的地方向右50px的地方,而它原来所在的地方