CSS 中 position:fixed 属性应用
2015-07-23 15:45
295 查看
转:http://jingyan.baidu.com/article/4d58d541d54e879dd4e9c033.html
关于fixed属性,在什么情况下需要用,怎么用,首先,我们应该先了解下fixed属性的说明:fixed总是以body为定位时的对象,总是根据浏览器的窗口来进行元素的定位,通过"left"、 "top"、 "right"、 "bottom" 属性进行定位。
那么,我们了解了fixed属性的说明后,就可以知道它的作用了。当我们需要使一个层相对于浏览器来自动调整该层的位置的时候,如果你使用position的absolute属性来定位该层,你会发现absolute属性并不能达到你想要的css效果,。这时,就需要要用到fixed属性来定位该层了,当然,你如果不想用fixed属性的话,你是可以使用JavaScript语句来代替的。下面我们来实例演示一下:
工具/原料:dreamweaver8、IE8浏览器
方法/步骤
我们在代码中加入2个层:div1和div2,代码如下:
<div class="div1">层1</div>
<div class="div2">层2</div>
写对应的css代码,我们先不加fixed属性试试:
.div1{
background-color:#FF0000;
width:100px;
height:100px;
}
.div2{
background-color:#33FF66;
width:100px;
height:100px;
}
然后我们F12运行一下看看效果,我是用的dreamweaver8,你也可以直接在记事本里面测试代码,图1是没加fixed属性的效果:
![](http://img.blog.csdn.net/20150730131307554?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
下面我们把fixed属性加上去,为了让我们便于观察,我们让层div1的宽和高足够大,css代码如下:
.div1{
background-color:#FF0000;
width:100px;
height:100px;
}
.div2{
background-color:#33FF66;
width:100px;
height:100px;
position:fixed;
left:50px;
top:50px;
}
运行看下效果,如图2:
![](http://img.blog.csdn.net/20150730131506836?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
下面我们拉动浏览器上的上下滚动条和左右滚动条,就都拉到中间的位置吧,如图3:
![](http://img.blog.csdn.net/20150730131548083?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQv/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/Center)
你会发现,给div2的position加上fixed属性后,不论我们如何拉动浏览器的滚动条,层2在浏览器中的位置都是不会变化的,是不是感觉有跃跃欲试的感觉呢,那么就赶紧动手实验一下吧。
关于fixed属性,在什么情况下需要用,怎么用,首先,我们应该先了解下fixed属性的说明:fixed总是以body为定位时的对象,总是根据浏览器的窗口来进行元素的定位,通过"left"、 "top"、 "right"、 "bottom" 属性进行定位。
那么,我们了解了fixed属性的说明后,就可以知道它的作用了。当我们需要使一个层相对于浏览器来自动调整该层的位置的时候,如果你使用position的absolute属性来定位该层,你会发现absolute属性并不能达到你想要的css效果,。这时,就需要要用到fixed属性来定位该层了,当然,你如果不想用fixed属性的话,你是可以使用JavaScript语句来代替的。下面我们来实例演示一下:
工具/原料:dreamweaver8、IE8浏览器
方法/步骤
我们在代码中加入2个层:div1和div2,代码如下:
<div class="div1">层1</div>
<div class="div2">层2</div>
写对应的css代码,我们先不加fixed属性试试:
.div1{
background-color:#FF0000;
width:100px;
height:100px;
}
.div2{
background-color:#33FF66;
width:100px;
height:100px;
}
然后我们F12运行一下看看效果,我是用的dreamweaver8,你也可以直接在记事本里面测试代码,图1是没加fixed属性的效果:
下面我们把fixed属性加上去,为了让我们便于观察,我们让层div1的宽和高足够大,css代码如下:
.div1{
background-color:#FF0000;
width:100px;
height:100px;
}
.div2{
background-color:#33FF66;
width:100px;
height:100px;
position:fixed;
left:50px;
top:50px;
}
运行看下效果,如图2:
下面我们拉动浏览器上的上下滚动条和左右滚动条,就都拉到中间的位置吧,如图3:
你会发现,给div2的position加上fixed属性后,不论我们如何拉动浏览器的滚动条,层2在浏览器中的位置都是不会变化的,是不是感觉有跃跃欲试的感觉呢,那么就赶紧动手实验一下吧。
相关文章推荐
- IE11无法引入css文件
- CSS学习笔记之框模型
- css清除浮动的几种方法以及对应规范说明
- css学习笔记
- CSS 实现背景透明 内容文字不透明 显示
- 安卓文本样式-Spannable的使用
- 《CSS 设计指南》学习笔记 一
- CSS Reset
- CSS布局--上中下布局(上下固定,中间自适应)
- css去掉iPhone、iPad默认按钮样式
- css3开发酷炫滑动导航
- 给 UILabel 中的文字增加 line-through / Strikethrough (删除线)样式
- css中的expression
- CSS清除浮动
- 7.23css样式
- 利用CSS的类名切换,进行DIV的显示隐藏,简化JS
- CSS布局:三列布局自适应问题
- 学习CSS(6)
- CSS 多浏览器兼容性问题及解决方案
- CSS+DIV简单布局