平时在写css样式的时候position是我们比较常用的一个属性。有时候会弄不清其几个属性值的真正区别。不过用的时间久了,也就慢慢的明白了。不过其实想用好position有时候还是需要些技巧的。写篇博文总结下自己。
-
position的作用:用于设置对html元素的定位方式
- position属性的值:
值名称 |
描述 |
static |
position的默认值,设置此属性时,元素按照正常的流式布局往下排列 |
inherit |
继承父元素的position值 |
relative |
相对于其他元素的定位 |
absolute
|
相对于采用static定位的父元素的绝对定位 |
fixed
|
相对于浏览器的绝对定位 |
备注:如果给元素才用了top,left等定位属性时,只有relative,absolute,fixed才会有效果。
3.应用实例
这里主要记录是absolute和fixed属性值。absolute与fixed的好处主要就是它的定位不拘束于其它同级元素,不想其它几种布局自己的定位会被其它元素所影响。所以像做一些动画效果,div浮动效果的时候,这个两个属性值就尤为适合了。
4.结合z-index的使用
z-index 用于控制元素在页面中层级的位置,就跟高楼大厦的楼层一样,z-index则可用于控制所在的楼层。absolute与fixed都支持z-index属性。所以当几个元素采用absolute或者fixed属性时,为了达到层次显示的效果,z-index属性就很方便了。
5.示例:
<html>
<title>Position</title>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">
#container{
height:1000px;
width: 960px;
margin: auto;
background-color: blue;
}
#roll-top {
padding:20px;
background-color:#525252;
cursor: pointer;
right:10px;
}
#roll-top,#below{
position:fixed;
top:85%;
font-size:12px;
color:#FFFFFF;
}
#below{
width:100%;
height:100px;
background-color:#757575;
z-index: -1;
}
</style>
<script type="text/javascript">
function rollbackTop(){
window.scrollTo(0);
}
</script>
</head>
<body>
<div id="container">
</div>
<div id="roll-top" onclick="rollbackTop()">返回顶部</div>
<div id="below">我在下面</div>
</body>
<script></script>
</html>
像利用absolute做动画效果的例子在JQuery官方上面的例子还是比较多。再次就不做详解了。
分享到:
相关推荐
主要介绍了详解CSS样式中的!important、*、_符号的相关资料,希望通过本文能帮助到大家,需要的朋友可以参考下
前言:position:sticky是css定位新增属性;可以说是相对定位relative和固定定位fixed的结合;它主要用在对scroll事件的监听上;简单来说,在滑动过程中,某个元素距离其父元素的距离达到sticky粘性定位的要求时(比如...
1.背景属性都不能继承 2.背景色:其默认值是 transparent。transparent 有“透明”之意 h1 {background-color: #00ff00} 3.背景图像:背景重复 背景定位 复制代码代码如下: p.flower {background-image: url(/i/...
5.9.2 使用list-style-position 属性 5.9.3 使用list-style-image 属性 5.9.4 list-style 属性 5.10 菜单原理 5.10.1 菜单原理 5.10.2 制作菜单内容和结构部分 5.10.3 CSS 代码编写 5.11 一个横向导航菜单的制作 ...
一、position:fixed 锁定位置(相对于浏览器的位置),例如有些网站的右下角的弹出窗口。 示例: 二、position:absolute 绝对位置: 1.外层没有position:absolute(或relative);那么div相对于浏览器定位...
position:sticky是css定位新增属性; 可以说是static(没有定位) 和 固定定位fixed 的结合; 它主要用在对 scroll 事件的监听上;简单来说,在滑动过程中,某个元素距离其父元素的距离达到 sticky 粘性定位的要求时...
3.CSS样式特征 1.继承性 必须是父子(有层叠嵌套的关系)结构 大部分的css效果是可以 2.优先级 1.浏览器默认样式 2.内部样式和外部样式(就近原则) 3.内联样式 4.!important; 绝对优先使用() 格式 p{ ...
一、使用js操作css属性的写法 1、对于没有中划线的css属性一般直接使用style.属性名即可。 如:obj.style.margin,obj.style.width,obj.style.left,obj.style.position 2、对于含有中划线的css属性,将每个中划线...
可见的页面版式主要由三个属性控制: position 属性、 display 属性和 float 属性。其中,position 属性控制页面上元素间的位置关系, display 属性控制元素是堆叠、并排,还是根本不在页面上出现, float 属性提供...
这个主要就是为了避免与页面上自定义的css 或者其他插件的css 冲突 马上要开始研究新版本的 zTree 结构了,所以要先把现在的情况再多分析一下,做了 v3.x 版本后也一直没有制作 css 的文档,特在此进行整理一下,...
我们现在想做一个头部的导航栏,又想用fixed把它固定在上方,又想用弹性盒布局去设置它内部的样式,可是发现其中的弹性盒布局已经失效了。 HTML代码如下: 协会简介 协会章程 协会架构 资料下载 CSS代码如下...
CSS内容补充之position CSS内容补充之overflow CSS内容之hover CSS内容之background 初始javaScript javascript代码存在形式 javascript基本预览 javascript字符串操作以及跑马灯实例 javascript数组和字典以及for...
它支持渐变的数字对象属性&CSS样式属性,并允许链接补间动画和行动结合起来,创造出复杂的序列。本文将详细介绍tween.js的使用 概述 tween.js允许以平滑的方式修改元素的属性值。只需要告诉tween想修改什么值,...
如果你对CSS定位还不够了解 可以接着往下看,运行里面的内容即可。【需求】: 将一个网页分成头、身和脚三部分。如下: ———————————————————— 头 ———————————————————— 身 ...
需要一个黑色(当然也可以其他)背景,且须设置为绝对定位,以下是项目中用到的css样式: /* 半透明的遮罩层 */ #overlay { background: #000; filter: alpha(opacity=50); /* IE的透明度 */ opacity: 0.5; /* ...
前言 我们在编写马过程中,想必大家对水平垂直居中的方法了解并不多。所以我给大家总结式的列出几...-css样式部分--> .Centered1{ background-color: #800070; width: 100%; height:500px; position: relative;
javascript 实现动态侧边栏 ...然后是css的样式: #div1{ width:150px; height:200px; background:#999999; position:absolute; left:-150px;} span{ width:20px; height:70px; line-height
02 css的列表属性与display属性 03 css的内外边距 04 css的内外边距补充 05 css的float属性 06 css的清除浮动 07 css的定位 08 css的margin定位 第40章 01 抽屉作业之head区域(导航条) 02 抽屉作业之置顶区域 03...