4、css之position
一、position
position属性：指定一个元素（静态的，相对的，绝对或固定）的定位方法的类型。
1、fixed值
fixed值：生成固定定位的元素，相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 ############################
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div onclick="GoTop();" style="height: 50px; width: 50px; background-color: black; color: white;
position: fixed;
bottom:20px;
right: 20px;
">返回顶部</div> <div style="height: 5000px; background-color: #dddddd"></div> <script>
function GoTop() {
document.body.scrollTop = 0;
}
</script>
</body>
</html> ###############################
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pg-header{
height: 48px;
background-color: black;
color: #dddddd;
position: fixed;
top: 0px;
right: 0;
left: 0px;
} .pg-body{
background-color: #dddddd;
height: 5000px;
margin-top: 50px;
}
</style>
</head>
<body>
<div class="pg-header">头部</div>
<div class="pg-body">内容</div>
</body>
</html>
2、absolute、relative组合使用
absolute：
生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。
元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。 relative：
生成相对定位的元素，相对于其正常位置进行定位。
因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。 #############################
##relative在父标签中，absolute在子标签中；
##absolute是相对于父标签来定位的；
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="position:relative; width: 500px; height: 200px; border: 1px solid red; margin: 0 auto;">
<div style="position: absolute; left: 0; bottom: 0; width: 50px; height: 50px; background-color: black;"></div>
</div>
</body>
</html>
3、层级显示
##代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div style="z-index: 2; position: fixed; top: 50%; left: 50%;
margin-left: -250px; margin-top: -200px; background-color: white; height: 400px; width: 500px;">
<input type="text">
</div> <div style="z-index: 1; position: fixed; background-color: black;
top: 0;
bottom: 0;
right: 0;
left: 0;
opacity: 0.4;"></div> <div style="height: 5000px; background-color: green;">最底层页面</div>
</body>
</html> ##
opacity: 0.4; //透明度
z-index: 1; //层级顺序，值小的层在下面
4、css之position的更多相关文章
- 深入理解css中position属性及z-index属性
深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共 ...
- div+css定位position详解
div+css定位position详解 1.div+css中的定位position 最主要的两个属性:属性 absolute(绝对定位) relative(相对定位),有他们才造就了div+css布局 ...
- 十步图解CSS的position
CSS的positon,我想做为一个Web制作者来说都有碰到过,但至于对其是否真正的了解呢?那我就不也说了,至少我自己并不非常的了解其内核的运行.今天在Learn CSS Positioning in ...
- css 之position用法详解
css 之position用法详解: http://www.jb51.net/web/77495.html
- CSS中Position属性
也许你看到这个标题觉得很简单,确实这是一篇关于CSS中Position属性基础知识的文章,但是关于Position的一些细节也许你不了解. 1.简介 position有五个属性: static | r ...
- CSS的position(位置)
position: 位置,absolute绝对位置,相对于浏览器边界的位置:relative相对位置,相对于它本应该出现的位置.fixed:固定位置,它不会随着滚动. 设置好position之后,就可 ...
- CSS的position设置
CSS的position设置: <%@ page language="java" contentType="text/html; charset=UTF-8&quo ...
- 关于CSS 的position定位问题
对于初学者来说,css的position定位问题是比较常见的.之前搞不清楚postion定位是怎么回事,排版一直歪歪斜斜的,老是排不好 css的定位一般来说,分为四种: position:static ...
- 《css定位 position》课程笔记
这是我学习课程css定位 position时做的笔记! 本节内容 html的三种布局方式 position可选参数 z-index 盒子模型和定位的区别 侧边栏导航跟随实例 html的三种布局方式 三 ...
- css的position中absolute和fixed的区别
fixed:固定定位 absolute:绝对定位 区别很简单: 1.没有滚动条的情况下没有差异 2.在有滚动条的情况下,fixed定位不会随滚动条移动而移动,而absolute则会随滚动条移动 常用场 ...
随机推荐
- nodejs REPL(交互式解释器)
Node.js REPL(交互式解释器) Node.js REPL(Read Eval Print Loop:交互式解释器) 表示一个电脑的环境,类似 Window 系统的终端或 Unix/Linux ...
- Mtk Camera
MTK6577+Android之Camera驱动 http://blog.csdn.net/loongembedded/article/details/41695205 MTK Camera 开机启动 ...
- React Native学习(二)之View
React Native组件解析(二)之View 0.JSX React的核心机制之一就是虚拟DOM:可以在内存中创建的虚拟DOM元素.React利用虚拟DOM来减少对实际DOM的操作从而提升性能. ...
- java nio 通道(二)
本文章来源于我的个人博客: java nio 通道(二) 一,文件通道 文件通道总是堵塞式的,因此不能被置于非堵塞模式. FileChannel对象是线程安全的.多个进程能够在同一个实例上并发调用方法 ...
- Struts2中的数据类型转换
Struts2对数据的类型转换 一.Struts2中自带类型转换拦截器 Struts2内部提供了大量转换器,用来完成数据类型转换的问题,有如下 * boolean 和 Boolean * char和 ...
- requests 中文乱码
jsUrl = 'http://www.heze.cn/qiye/index.php?a=userinfo&username={}'.format(bizQiyeId)r = requests ...
- 阿里 JAVA 开发手册 学习 4 工程规约
应用分层 1.分层如下 1)开放接口层:可以直接封装Service接口暴露成RPC:通过web封装成http接口:网关控制层等. 2)终端显示层:各个端的模板渲染并执行显示层. 3)Web层:主要是度 ...
- 基于 phantomjs 的自动化测试---（1）
它主要靠js脚本来模拟操作一般流程是写代码写代码写代码open 某个 url监听 onload 事件事件完成后调用 sendEvent 之类的 api 去点击某个 DOM 元素所在 point触发交互 ...
- PySpider安装与使用(Windows系统下)
PySpider Begin 安装pip install pyspider 在windows系统好像会出现如下问题 Command "python setup.py egg_info&quo ...
- ubuntu搭建nginx
1.下载nginx压缩包 2.上传.解压 tar -zxvf nginx-1.8.0.tar.gz cd nginx-1.8.0 3.安装 make install 4.启动,停止 ,重启 服务 可 ...