欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

HTML5系列代码：层的基本定位

程序员文章站 2022-05-11 09:09:15
...
  • position 属性把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
  • static 默认。位置设置为 static 的元素，它始终会处于页面流给予的位置（static 元素会忽略任何
    top、bottom、left 或 right 声明）。
  • relative 位置被设置为 relative 的元素，可将其移至相对于其正常位置的地方，因此 “left:20”
    会将元素移至元素正常位置左边 20 个像素的位置。
  • absolute 位置设置为 absolute 的元素，可定位于相对于包含它的元素的指定坐标。此元素的位置可通过
    “left”、“top”、“right” 以及 “bottom” 属性来规定。
  • fixed 位置被设置为 fixed 的元素，可定位于相对于浏览器窗口的指定坐标。此元素的位置可通过
    “left”、“top”、“right” 以及"bottom" 属性来规定。不论窗口滚动与否，元素都会留在那个位置。工作于
    IE7（strict 模式）。
 	<html>
 	<head>
 	<title>层的定位</title>
 	</head>
 	<style>
 	    div {position:absolute;
 	        width:300;
 	        height:300;
 	        left:5em;
 	        top:5em;
 	        }
 	</style>
        <body>
 	<div>
 	夕阳武士为了筹措盘缠回故乡而出战马贼，但小时医生的告诫他会在这一年失明，虽然光线在他的眼中已经日渐昏暗，但他还是坚持出战最终战死。欧阳峰很奇怪他为何要急着赶回去？武士回答说家乡的桃花很美，他要回去看桃花！欧阳锋好奇去了武士的家乡，发现那里根本没有桃花，只有一个女人，她的名字叫做桃花......
	</div>
	</body>
	</html>
相关标签： HTML5 css java html js

上一篇： HTML5重要知识收藏

下一篇： css中媒体查询@media

推荐阅读