position属性

时间 2019-11-26

标签 position 属性栏目 CSS 繁體版

原文原文链接

position这个属性定义创建元素布局所用的定位机制。任何元素均可以定位，不过绝对或固定元素会生成一个块级框，而不论该元素自己是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。

绝对定位sbsolute:生成绝对定位的元素，相对于 static 定位之外的第一个父元素进行定位。元素的位置经过 "left", "top", "right" 以及 "bottom" 属性进行规定。

<style>
h2#wa
{
position:absolute;
left:100px;
top:150px;}
	</style>

</head>
<body>
	<h2 id="wa">这是一个带有绝对定位的标题</h2>
	<p>经过绝对定位，元素能够放置到页面上的任何位置。下面的标题距离页面左侧 100px，距离页面顶部 150px。</p>
</body>

下图所示浏览器

相对定位relative：生成相对定位的元素，相对于其正常位置进行定位。所以，"left:20" 会向元素的 LEFT 位置添加 20 像素。

h2#wa
{
position:relative;
left:100px;
top:150px;}
	</style>

</head>
<body>
	<h2 id="wa">这是一个带有绝对定位的标题</h2>
	<p>经过绝对定位，元素能够放置到页面上的任何位置。下面的标题距离页面左侧 100px，距离页面顶部 150px。</p>
</body>

以下所示：布局

fixed:生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置经过 "left", "top", "right" 以及 "bottom" 属性进行规

p.one
{
position:fixed;
left:5px;
top:5px;
}
p.two
{
position:fixed;
top:30px;
right:5px;
	</style>
</head>
<body>
	<p class="one">一些文本。</p>
    <p class="two">更多的文本。</p>

以下所示：blog

本例演示如何设置元素的形状。此元素被剪裁到这个形状内，并显示出来。

img 
{
position:absolute;
clip:rect(0px 50px 200px 0px)
}
	</style>
</head>
<body>
<p>clip 属性剪切了一幅图像：</p>
<p><img border="0" src="1.jpg" width="120" height="151"></p>
</body>

以下所示继承

绝对定位的优先级：Z-index可被用于将在一个元素放置于另外一元素以后，或者是前面。

img.x
{
position:absolute;
left:0px;
top:0px;
z-index:-1
}
	</style>
</head>
<body>
<h1 style="color:red">这是一个标题</h1>
<img class="x" src="1.jpg" /> 
<h2 style="color:red">默认的 z-index 是 0。Z-index -1 拥有更低的优先级。</h2>

以下所示ip

默认值static：默认值。没有定位，元素出如今正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。

继承元素inherit：规定应该从父元素继承 position 属性的值。

1. CSS position属性、float属性
2. CSS position 属性
3. position属性
4. background-position属性
5. css的position属性
6. CSS中Position属性
7. position属性详解
8. CSS 之 Position 属性
9. position 的属性值
10. CSS 布局的position属性、float属性
更多相关文章...
• WebSecurity 属性 - CurrentUserName - ASP.NET 教程
• WebSecurity 属性 - HasUserId - ASP.NET 教程
• JDK13 GA发布：5大特性解读
• 互联网组织的未来：剖析GitHub员工的任性之源