html中fixed属性,CSSposition属性中:fixed使用详解
关于fixed属性,在什么情况下需要用,怎么用,首先,我们应该先了解下fixed属性的说明:fixed总是以body为定位时的对象,总是根据浏览器的窗口来进行元素的定位,通过"left"、 "top"、 "right"、 "bottom" 属性进行定位。
那么,我们了解了fixed属性的说明后,就可以知道它的作用了。当我们需要使一个层相对于浏览器来自动调整该层的位置的时候,如果你使用position的absolute属性来定位该层,你会发现absolute属性并不能达到你想要的css效果,。这时,就需要要用到fixed属性来定位该层了,当然,你如果不想用fixed属性的话,你是可以使用JavaScript语句来代替的。下面我们来实例演示一下:
1.我们在代码中加入2个层:div1和div2,代码如下:
2.写对应的css代码,我们先不加fixed属性试试:.div1{background-color:#FF0000;width:100px;height:100px;}
.div2{background-color:#33FF66;width:100px;height:100px;}
3.然后我们F12运行一下看看效果,我是用的dreamweaver 8,你也可以直接在记事本里面测试代码,图1是没加fixed属性的效果:
4.下面我们把fixed属性加上去,为了让我们便于观察,我们让层div1的宽和高足够大,css代码如下:.div1{
background-color:#FF0000;
width:2000px;
height:2000px;
}
.div2{
background-color:#33FF66;
width:100px;
height:100px;
position:fixed;
left:50px;
top:50px;
}
运行看下效果,如图2:
5.
下面我们拉动浏览器上的上下滚动条和左右滚动条,就都拉到中间的位置吧,如图3:
你会发现,给div2的position加上fixed属性后,不论我们如何拉动浏览器的滚动条,层2在浏览器中的位置都是不会变化的,是不是感觉有跃跃欲试的感觉呢,那么就赶紧动手实验一下吧。
html中fixed属性,CSSposition属性中:fixed使用详解相关推荐
- python中requests库的用途-python中requests库session对象的妙用详解
在进行接口测试的时候,我们会调用多个接口发出多个请求,在这些请求中有时候需要保持一些共用的数据,例如cookies信息. 妙用1 requests库的session对象能够帮我们跨请求保持某些参数,也 ...
- ASP中利用OWC控件实现图表功能详解[zz]
ASP中利用OWC控件实现图表功能详解 在ASP中利用OWC(Office Web Components)控件可轻松实现各种图表功能,如饼图,簇状柱型图,折线图等. 在下面的代码中我详细的给出了饼图, ...
- Python的Django框架中forms表单类的使用方法详解2
用户表单是Web端的一项基本功能,大而全的Django框架中自然带有现成的基础form对象,本文就Python的Django框架中forms表单类的使用方法详解. Form表单的功能 自动生成HTML ...
- JAVA中的类和对象之this的详解
系列文章目录 第一章 JAVA中的类和对象之this的详解 目录 前言 一.为什么要有this引用 二.this的三种用法 1.this.成员变量 2.this.成员方法 3.this()调用其它的构 ...
- ASP中利用OWC控件实现图表功能详解
在ASP中利用OWC(Office Web Components)控件可轻松实现各种图表功能,如饼图,簇状柱型图,折线图等. 在下面的代码中我详细的给出了饼图,簇状柱型图,折线图的使用方法.OWC的更 ...
- PPT中实现长图片滚动条显示!(详解)
PPT中实现长图片滚动条显示!(详解) 1.环境是ppt2010 2.点击开发工具. 3.如果没有开发工具 4.在属性里设置.
- mysql resulttype map_Mybatis中的resultType和resultMap查询操作实例详解
resultType和resultMap只能有一个成立,resultType是直接表示返回类型的,而resultMap则是对外部ResultMap的引用,resultMap解决复杂查询是的映射问题.比 ...
- android fragment加载布局的方式,Android中Fragment的加载方式与数据通信详解
Android中Fragment的加载方式与数据通信详解 发布时间:2020-08-22 18:55:57 来源:脚本之家 阅读:155 作者:Joah 一.加载方式 1. 静态加载 1.1 加载步骤 ...
- 对python3中pathlib库的Path类的使用详解
原文连接 https://www.jb51.net/article/148789.htm 1.调用库 ? 1 from pathlib import 2.创建Path对象 ? 1 2 3 4 5 ...
- JAVA中希尔排序去的讲解_java 中基本算法之希尔排序的实例详解
java 中基本算法之希尔排序的实例详解 希尔排序(Shell Sort)是插入排序的一种.也称缩小增量排序,是直接插入排序算法的一种更高效的改进版本.希尔排序是非稳定排序算法.该方法因DL.Shel ...
最新文章
- assa_高金赴美国ASSA年会招聘青年教授
- Qt窗口在屏幕上居中显示
- 汉明距离—leetcode461
- oracle 数据执行计划,Oracle 常见的执行计划步骤(explain结果的Description数据参考)...
- 2017计算机基础教学大纲,2017级大学计算机基础教学大纲
- 100%有用的Photoshop实用快捷健介绍
- windows下安装ubuntu16.04双系统的注意事项
- ASP.NET的页面生存周期 [转]
- Linux中级之ansible概念及hoc命令行调用模式
- 小技巧:方便开机打开多个程序
- 跨实例查询 mysql_SQL语句怎么搞定跨实例查询?
- centos7 配置阿里yum源
- 6大关键词解析儿童学习桌消费市场
- 麻省理工学院公开课:信号与系统:模拟与数字信号处理 调幅演示
- Boost出现error C2678
- 芙拉机器人_【诉说实情】芙拉2020新品女士小号斜挎包心形印花怎么样?别花冤枉钱,内幕大揭秘 | 智能扫地机器人评测...
- android 手机一直进安全模式 解决方法
- 【Python定时发送消息到微信】
- COOX基础培训之SCADA(一)
- sde java_java操作oracle空间信息介绍(SDE)
热门文章
- 任务宿主阻止关机解决方案
- bin文件怎么打开 linux,BIN 文件扩展名: 它是什么以及如何打开它?
- coldfusion php,将一些PHP移植到ColdFusion
- MongoDB find查询语句详解
- 15年30亿设备,安卓如何从0到最大的操作系统?
- Spring boot出现java.awt.HeadlessException【已解决】
- 猎豹傅盛:升维思考,降维攻击!(深度好文)
- ABAP TRANSPORTING NO FIELDS 用法
- android 底层键值映射,如何在使用android-ETE时进行键值映射.doc
- 【历史上的今天】12 月 20 日:苹果收购 NeXT;苏联超级计算机先驱诞生;《绝地求生》发布