position用法
fixed的用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pg-header{
background-color: red;
height: 48px;
/*添加position后可以使该div与其他div处于屏幕的不同层,fixed为将该div固定到浏览器窗口的指定位置,
top、bottom、right、left四个方位代表了离屏幕有多少距离*/
position: fixed;
top: 0px;
right: 0px;
left: 0px;
}
.pg-body{
background-color: darkgray;
height: 5000px;
margin-top: 50px;
}
.pg-back_to_top {
background-color: black;
color: white;
height: 50px;
width: 50px;
position: fixed;
right: 10px;
bottom: 10px;
}
</style>
</head>
<body>
<div class="pg-header">标题</div>
<div class="pg-body">内容</div>
<div onclick="GoTop();" class="pg-back_to_top">返回顶部</div>
<script>
function GoTop(){
console.log("123")
document.documentElement.scrollTop = 0;
}
</script>
</body>
</html>
absolute和relative用法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--position的relative如果单独使用,没有任何效果,因为它是自己定义自己,对div自己没有任何实际意义。
但如果这个div的内部还有div,而且这个内部的div想要定义自己相对于父div的位置,就需要在自己的position
属性添加absolute-->
<div style="position:relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto">
<div style="position: absolute;bottom: 0px;width: 50px;height: 50px;background-color: black"></div>
</div>
<div style="position:relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto">
<div style="position: absolute;top: 0px;right: 0px;width: 50px;height: 50px;background-color: black"></div>
</div>
<div style="position:relative;width: 500px;height: 200px;border: 1px solid red;margin: 0 auto">
<div style="position: absolute;top: 0px;width: 50px;height: 50px;background-color: black"></div>
</div>
</body>
</html>e
z-index属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--z-index可以设置层级页面的优先级,值越大,优先级越高,优先级高的放在最上面-->
<div style="z-index: 10;background-color: white;position: fixed;height: 200px;width: 400px;
top: 50%;left: 50%;margin-top: -200px;margin-left: -200px">
<input type="text"/>
<input type="text"/>
<input type="text"/>
</div>
<div style="z-index:9;position: fixed;background-color: darkgray;
top: 0;
bottom: 0;
left: 0;
right: 0;
/*opacity属性为设置div的透明度,值越大,背景色越深*/
opacity: 0.5"></div>
<div style="height: 5000px;background-color: green">第一层页面</div>
</body>
</html>
position用法的更多相关文章
- css 之position用法详解
css 之position用法详解: http://www.jb51.net/web/77495.html
- HTML之Position用法
在此,先做声明,本篇仅是摘录自互联网,个人认为这篇文章讲的很不错,附于此地与大家共同欣赏. position的四个属性值: 1.relative2.absolute3.fixed4.static下面分 ...
- html 之 position用法
引用: position的四个属性值: 1.relative2.absolute3.fixed4.static下面分别讲述这四个属性. <div id="parent"> ...
- 浅谈 css 之 position用法
在 css中, position 属性有四个值可用: static(默认值).absolute.relative.fixed. relative:相对定位(相对于自身进行在常规流中的位置进行定位,保留 ...
- CSS中常见的位置(position)属性
常用的位置属性列表: position(top.bottom.left.right) .overflow.z-index position用法: 值 描述 relative 相对定位,原位置仍占用空间 ...
- CSS语法与用法小字典
前言:这是上学时期对CSS学习的整理,一直没见过光,由于不是专门做前端开发的,难免写不到重点,但对于看懂CSS,和掌握一些基本的用法,熟悉里面的门路还是大有裨益的.由于是从word中贴过来的,排版和格 ...
- [js - 算法可视化] 汉诺塔(Hanoi)演示程序
前段时间偶然看到有个日本人很早之前写了js的多种排序程序,使用js+html实现的排序动画,效果非常好. 受此启发,我决定写几个js的算法动画,第一个就用汉诺塔. 演示地址:http://tut.ap ...
- 顶点/片元 shader 总结
Cg顶点程序必须在结构中传递顶点数据.几种常用的顶点结构定义在文件UnityCG.cginc中,有如下三种结构体: 1.appdata_base: 包含顶点位置,法线和一个纹理坐标.2.appdata ...
- WEB入门.六 盒子模型
学习内容 CSS盒子模型 盒子之间的关系 页面元素定位 能力目标 理解盒子模型 理解内容与表现分离的优点 理解并掌握盒子之间的关系 理解并掌握绝对定位与相对定位的用法 本章简介 上一章节中已经讲解了页 ...
随机推荐
- Windows命令查看文件的MD5/SHA1/SHA256
certutil -hashfile "D:\Tools\Microsoft\SqlServer\2016\ct_sql_server_2016_enterprise_x64_dvd_869 ...
- Contiki学习笔记
http://blog.chinaunix.net/uid-9112803-id-2975824.html
- linux 学习 端口占用 && 内存使用
安装: apt-get update apt-get install net-tools Linux上:netstat -anop | grep ':50001' windows上:netstat - ...
- python with open as f 写韩文中文乱码
python3和python2的写法不一样具体如下: python3: with open(r'd:\ssss.txt','w',encoding='utf-8') as f: f.write(u'中 ...
- malloc 动态分配内存
很久没有学习C了,复习下,有时候觉的C特别优美,学习算法和数据结构最佳选择. #include "stdafx.h" #include<stdlib.h> int ma ...
- [phonegap]安装升级
安装 npm install -g phonegapnpm install -g phonegap@版本号 比如 npm install -g phonegap@3.3.0-0.19.6 升级 ...
- 第十五章 深入分析iBatis框架之系统架构与映射原理(待续)
iBatis框架主要的类层次结构 iBatis框架的设计策略 iBatis框架的运行原理 iBatis框架对SQL语句的解析 数据库字段映射到Java对象 示例运行的结果 设计模式解析之简单工厂模式 ...
- spring bean属性及子元素使用总结
spring bean属性及子元素使用总结 2016-08-03 00:00 97人阅读 评论(0) 收藏 举报 分类: Spring&SpringMVC(17) 版权声明:本文为博主原创 ...
- Hbase优化记录
<configuration><property><name>hbase.rootdir</name><value>hdfs://gagcl ...
- c++primer-p101.ex3.24
要求使用迭代器 读入一组整数并把它们存入一个vector对象 1. 将相邻每对整数和输出 2. 先输出第一个和最后一个数的和,然后是第二个和倒数第二个...等等 自己写的: #include<i ...