css —— position属性(w3school的学习笔记)

CSS 定位机制:

要理解定位机制之前,先了解一下什么叫“文档流”

文档流:将浏览器窗体内部自上而下分成一行行, 并在每行中按从左至右的顺序排放元素。

CSS 有三种基本的定位机制:普通流、浮动和绝对定位。
除非专门指定,否则所有框都在普通流中定位。也就是说,普通流中的元素的位置由元素在 (X)HTML 中的位置决定。

  • 块级框(对应于 块标签,如div 等等)从上到下一个接一个地排列,框之间的垂直距离是由框的垂直外边距计算出来。
  • 行内框(对应于 行标签,如span 等等)在一行中水平布置。可以使用 水平内边距、边框 和 外边距 调整它们的间距。但是,垂直内边距、边框 和 外边距 不影响 行内框 的高度。

由一行形成的水平框称为行框(Line Box),行框的高度总是足以容纳它包含的所有行内框。不过,设置行高可以增加这个框的高度。

块标签:包含p、div、ul、ol、li、dl、dt、dd、h1~h6;
行标签:包含a、span、em、strong、img、var;

position 属性值分别为:static relative absolute fixed

positive属性 针对的是 块标签

1、静态定位(static)
一般的标签元素不加任何定位属性都属于静态定位,对象遵循正常文档流。top、right、bottom、left等属性无效。
2、相对定位(relative)与绝对定位(absolute)
relative:对象遵循正常文档流,相对于对象左上角位置(移动前)进行定位,移动后仍占据原空间,对象不可层叠。
absolute:对象脱离正常文档流,其层叠可通过 z-index 属性定义
3、固定定位(fixed)
对象脱离正常文档流,使用top、right、bottom、left等属性以窗口左上角为参考点进行定位,当出现滚动条时,对象不会随着滚动,其层叠通过 z-index 属性定义。

相对定位不会删除它本身在文档流中占据的空间,其他元素不可以占据该空间。
绝对定位则会删除掉该元素在文档流中的位置,使其完全从文档流中抽了出来,其他元素可以占据其空间,可以通过z-index来设置它们的堆叠顺序。

举个例子

<html>
<head>
	<style type="text/css">
	
		h5.pos_right{
			position:relative;
			left:20px/*样式 "left:20px" 向元素的原始左侧位置增加 20 像素*/
		}
		
		h2.pos_abs{
			position:absolute;
			left:100px;
			top:150px
		}

	style>
head>

<body>

	<h5>这是位于正常位置的标题h5>
	<h5 class="pos_right">这个标题相对于其正常位置向右移动h5>
	<h5 class="pos_right">这个标题相对于其正常位置向右移动h5>
	<h5 class="pos_right">这个标题相对于其正常位置向右移动h5>
	<h5 class="pos_right">这个标题相对于其正常位置向右移动h5>
	<h5 class="pos_right">这个标题相对于其正常位置向右移动h5>
	<h5 class="pos_right">这个标题相对于其正常位置向右移动h5>
	<h5 class="pos_right">这个标题相对于其正常位置向右移动h5>
	<h5 class="pos_right">这个标题相对于其正常位置向右移动h5>
	<h2 class="pos_abs">这是带有绝对定位的标题h2>

body>

html>

css —— position属性(w3school的学习笔记)_第1张图片
z-index的使用:
如果 z-index 为 负值,则被 原图层 覆盖
如果 z-index 为 正值,则 覆盖 原图层

<html>
<head>
	<style type="text/css">
	
		img.x{
			position:absolute;
			left:0px;
			top:0px;
			z-index:1
		}
	
		img.y{
			position:absolute;
			left:50px;
			top:0px;
			z-index:500
		}
		
	style>
head>

<body>
	<img class="x" src="/i/eg_mouse.jpg" /> 
	<img class="y" src="/i/eg_smile.gif" />
body>

html>

css —— position属性(w3school的学习笔记)_第2张图片

你可能感兴趣的:(css,css定位)