Jquery中文网 www.jquerycn.cn
Jquery中文网 >  CSS教程  >  经典实例  >  正文 CSS绝对定位固定定位详解

CSS绝对定位固定定位详解

发布时间:2017-12-12   编辑:www.jquerycn.cn
jquery中文网为您提供CSS绝对定位固定定位详解等资源,欢迎您收藏本站,我们将为您提供最新的CSS绝对定位固定定位详解资源
CSS绝对定位固定定位是通过position 为 relative/absolute/fixed 祖先元素进行定位即可达到我们的要求了,下面一起来看看。

 绝对定位 的元素基于最近的 position 为 relative/absolute/fixed 祖先元素进行定位。如果没有找到 position 为 relative/absolute/fixed 的元素,则基于是以整个 canvas (渲染内容的空间) 的坐标原点(左上)为基准,以 viewport (也就是浏览器视窗内渲染 HTML 的空间)为大小的矩形进行定位, 并不是基于根元素定位 。

固定定位 的元素基于viewport(浏览器视窗)进行定位。

1. 绝对定位 和 固定定位 的元素若没有设置 top/right/left/bottom 的值。其位置为原来在文档流中的位置。其他文档流元素会占据其原来位置。

要使绝对定位或固定定位的元素水平居中,需要设置其 width 为固定值,并且 left: 0; right: 0; 。

2. 绝对定位 和 固定定位 的元素,若其宽度 width 或高度 height 的单位为 百分比 ,宽度和高度值是相对于其基于定位的元素计算的。(在使用一些stick插件时尤其要注意这点)。

例子

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>

<body style="height:1000px;">
<div>
<div id="nomove" style="background:#999999; width:100px; height:100px; left:0; bottom:0; position:fixed;">
</div>
</div>
</body>
</html>

您可能感兴趣的文章:
CSS绝对定位固定定位详解
CSS基本布局16例
css div绝对定位与固定定位实例
CSS中绝对定位absolute和相对定位relative详解
详解网页设计中的定位与定位应用
移动端页面头部固定定位的绝对定位实现(代码示例)
实例讲解深入学习CSS网页定位元素
图例详解网页制作中的绝对定位和相对定位
详细学习CSS中的网页布局的属性
CSS教程—元素的定位

[关闭]