您所在位置: 网站首页 / 关于CSS的 position 属性.doc / 文档详情
关于CSS的 position 属性.doc 立即下载
2024-09-09
约1.4千字
约3页
0
42KB
举报 版权申诉
预览加载中,请您耐心等待几秒...

关于CSS的 position 属性.doc

关于CSS的position属性.doc

预览

在线预览结束,喜欢就下载吧,查找使用更方便

16 金币

下载文档

如果您无法下载资料,请参考说明:

1、部分资料下载需要金币,请确保您的账户上有足够的金币

2、已购买过的文档,再次下载不重复扣费

3、资料包下载后请先用软件解压,在使用对应软件打开

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


可能的值
值描述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属性的值。
演示:
<html>
<head>
<styletype="text/css">
h2.pos_abs
{
position:absolute;
left:100px;
top:150px
}
</style>
</head>

<body>
<h2class="pos_abs">这是带有绝对定位的标题</h2>
<p>通过绝对定位,元素可以放置到页面上的任何位置。下面的标题距离页面左侧100px,距离页面顶部150px。</p>
</body>

</html>

演示图:


相关:
HYPERLINK"http://www.awflasher.com/blog/archives/731"\o"PermalinktoCSS中position的absolute和relative的应用"CSS中position的absolute和relative的应用

之前老弄不明白,只能凭借一点短期内“虐出来的经验”制作需要的效果,后来仔细研究了一下Hutia的XScroller,并且仔细看了文档,才知道这个position属性其实是指本体对上级的定位。如果这么理解,就好办了。
默认的属性值都是static,静态。就不用多说了。最关键的是relative(相对)以及absolute(绝对)。往往我们如果是COPY别人的代码,会把absolute属性与left、top配合起来制作相关的“悬浮层”效果。然而有时候我们需要针对某一个容器的悬浮效果,而不是针对窗口的。这时候通过高度、宽度的计算不但麻烦,而且几乎无法完美实现效果。我一开始也无能为力,后来发现只要把其上一级的样式属性position设置为relative就可以了。
也就是说,position的属性值的效果,直接受其容器样式中position属性值影响。例如如下A-B的嵌套结构
<divid="A">
<divid="B">
</div>
</div>
当A的position为relative时,B的position为absolute才有效。这时候left:0、top:0就不再针对窗口文档,而是针对id为A的这个div了。
这样在开发一些基于B/S应用程序的时候,就能很方便的添加一些UI元素,例如某一个活动层的关闭按钮等。
查看更多
单篇购买
VIP会员(1亿+VIP文档免费下)

扫码即表示接受《下载须知》

关于CSS的 position 属性

文档大小:42KB

限时特价:扫码查看

• 请登录后再进行扫码购买
• 使用微信/支付宝扫码注册及付费下载,详阅 用户协议 隐私政策
• 如已在其他页面进行付款,请刷新当前页面重试
• 付费购买成功后,此文档可永久免费下载
全场最划算
12个月
199.0
¥360.0
限时特惠
3个月
69.9
¥90.0
新人专享
1个月
19.9
¥30.0
24个月
398.0
¥720.0
6个月会员
139.9
¥180.0

6亿VIP文档任选,共次下载特权。

已优惠

微信/支付宝扫码完成支付,可开具发票

VIP尽享专属权益

VIP文档免费下载

赠送VIP文档免费下载次数

阅读免打扰

去除文档详情页间广告

专属身份标识

尊贵的VIP专属身份标识

高级客服

一对一高级客服服务

多端互通

电脑端/手机端权益通用