欢迎您访问我爱IT技术网,今天小编为你分享的javascript教程:【通过设置CSS中的position属性来固定层的位置】,下面是详细的讲解!
通过设置CSS中的position属性来固定层的位置
定义和用法
position 属性规定元素的定位类型。
说明
这个属性定义建立元素布局所用的定位机制。任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。
| 默认值: | static |
|---|---|
| 继承性: | no |
| 版本: | CSS2 |
| JavaScript 语法: | object.style.position="absolute" |
实例
定位 h2 元素:
h2
{
position:absolute;
left:100px;
top:150px;
}
TIY
浏览器支持
所有主流浏览器都支持 position 属性。
注释:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。
可能的值
TIY 实例
| 值 | 描述 |
|---|---|
| absolute |
生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
| fixed |
生成绝对定位的元素,相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 |
| relative |
生成相对定位的元素,相对于其正常位置进行定位。 因此,"left:20" 会向元素的 LEFT 位置添加 20 像素。 |
| static | 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。 |
| inherit | 规定应该从父元素继承 position 属性的值。 |
定位:相对定位本例演示如何相对于一个元素的正常位置来对其定位。定位:绝对定位本例演示如何使用绝对值来对元素进行定位。定位:固定定位本例演示如何相对于浏览器窗口来对元素进行定位。设置元素的形状本例演示如何设置元素的形状。此元素被剪裁到这个形状内,并显示出来。Z-indexZ-index可被用于将在一个元素放置于另一元素之后。Z-index上面的例子中的元素已经更改了Z-index。
下面给大家介绍CSS中的Position属性
CSS的Position很重要,有以下几个值:static,relative,absolute,fixed。
Static:静态定位。如果你没有设置position属性,那么缺省就是static。top,left,bottom,right等属性,在static的情况下是无效的,要使用这些属性,必须把position设置为其他三个值之一。
Relative:相对定位。元素将按照静态定位时的位置进行调整,在静态定位中分配给元素的空间仍然会分配给它,它两边的元素不会向它靠近来填充那个空间,但它们也不会从元素的新位置被挤走。
Absolute:绝对定位。元素将按照包含它的元素的位置进行调整,比如它嵌套在另一个绝对定位的元素中,那么就相对于那个元素定位。
Fixed:固定定位。元素将被设置在浏览器上一个固定位置上,不会随其他元素滚动。形象点说,上下拉动滚动条的时候,fixed的元素在屏幕上的位置不变。需要注意的是IE6并不支持此属性。
注意:很多网页都是居中的,这样,当对元素进行绝对定位的时候,在不同的分辨率下显示会有偏差,这时,我们可以通过类似下面的方法来处理:
<div style="position: relative;"> <div style="position: absolute; top: 10px; left: 10px;"></div> </div>
关于通过设置CSS中的position属性来固定层的位置的用户互动如下:
相关问题:CSS中position属性详解
答:position用来设定元素的定位类型,有absolute(绝对定位)、relative(相对定位)、static(静态定位,默认值)、fixed(固定定位)四种。 static:默认。位置设置为 static 的元素,它始终会处于页面流给予的位置(static 元素会忽略任何 top、... >>详细
相关问题:HTML代码中如何用POSITION属性来固定一个DIV模块的...
答:要想div固定在一个位置,可以使用css中的绝对定位来实现 position: absolute。然后可以通过top、left、right、bottom来定位方向。举个定位在顶部的例子: .top{ position: absolute; top: 0px; z-index:999; border:1px red solid;}DIV固定在顶部 >>详细
相关问题:CSS怎么把一个层固定在一个屏幕的绝对位置?
答:可以采用css中的position来实现决定定位。 1、代码实例如下: p.one{position:fixed;left:5px;top:5px;}p.two{position:fixed;top:30px;right:5px;}一些文本。更多的文本。此实例是相对于浏览器边框进行的定位。 2、补充相关知识 bsolute 生成绝... >>详细
- 【firefox】firefox浏览器不支持innerText的解决
- 【Extjs】Extjs学习过程中新手容易碰到的低级错误
- 【clearInterval】js clearInterval()方法的定义
- 【ComboBox】ComboBox 和 DateField 在IE下消失的
- 【dom】javascript dom追加内容实现示例-追加内容
- 【has】基于jquery的has()方法以及与find()方法以
- 【extjs】Extjs入门之动态加载树代码-动态加载树
- 【checkbox】让checkbox不选中即将选中的checkbox
- 【Array】js中更短的 Array 类型转换-类型转换
- 【append】append和appendTo的区别以及appendChil
- 评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
-
