css-position属性实例1
一：position说明
position
fixed 实现固定在某个位置
正常情况写两个div是在一层中，通过position属性，可以实现分两层和固定，就像在墙上贴了一层纸，就分了两层了。
postion通常结合top,left,right,bottom实现定位。
top:0 靠顶部为0
left:0 靠左边为0
right:0 靠右边为0
bottom:0 靠底部为0
二：postion实现返回顶部
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!-- 实现第一个div固定在右下角-->
<div onclick="goTop()" style="width: 40px;height: 50px;background-color: black;color: white;position:fixed;right:20px;bottom: 0;">返回顶部</div>
<div style="height: 5000px;background-color: #2459a2"></div>
<script>
function goTop(){
document.body.scrollTop=0; //跳转顶部
}
</script>
</body>
</html>
三：postion实现顶部菜单固定
问题1：position: fixed;//当这样的时候div就float起来，它就不是块，所以会出现不占全部行，通过left，right解决
/*当这样的时候div就float起来，它就不是块，所以会出现不占全部行，通过left，right解决*/
position: fixed;
top: 0;
left: 0;
right: 0;
问题2：第二个div内容部分没有了，所以要设置第二个div通过margin-top离顶部48px;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.pg-header{
height: 48px;
background-color: black;
color:white;
/*当这样的时候div就float起来，它就不是块，所以会出现不占全部行，通过left，right解决*/
position: fixed;
top: 0;
left: 0;
right: 0;
}
.pg-body{ margin-top: 50px;
background-color: #ff18a4;
height: 5000px; }
</style>
</head>
<body>
<div class="pg-header">头部</div>
<div class="pg-body">内容</div>
</body>
</html>
css-position属性实例1的更多相关文章
- 【转载】CSS position属性和实例应用
目前几乎所有主流的浏览器都支持position属性("inherit"除外,"inherit"不支持所有包括IE8和之前版本IE浏览器,IE9.IE10还没测试 ...
- CSS position属性absolute relative等五个值的解释
DIV CSS position绝对定位absolute relative教程篇 常常使用position用于层的绝对定位,比如我们让一个层位于一个层内具体什么位置,为即可使用position:abs ...
- 详解CSS position属性
原文地址:http://luopq.com/2015/11/15/css-position/ position是CSS中非常重要的一个属性,通过position属性,我们可以让元素相对于其正常位置,父 ...
- css position 属性 (absolute 和fixed 区别)
在css3中,position的属性值有:inherit, static, relative ,absolute, fixed. inherit 是继承父元素的position属性值,IE不支持. s ...
- CSS position 属性
position: relative | absolute | static | fixed 参考网站:http://blog.csdn.net/dyllove98/article/details/8 ...
- CSS position 属性_css中常用position定位属性介绍
css可以通过为元素设置一个position属性值,从而达到将不同的元素显示在不同的位置, position定位是指定位置的定位,以下为常用的几种: 1.static(静态定位): 这个是元素的默认定 ...
- css position属性
absolute, 屏幕为参照, 但固定在页面上,随页面滚动而动. fixed, 父元素没有指定position属性(或position属性为static时)==>屏幕为参照,固定在屏幕的某个位 ...
- CSS position属性 标签： css 2016-09-06 15:58 78人阅读 评论(0) 收藏
踩了position的坑,主要是因为对position属性理解不深. 以下是w3school中对position的解释: 可能的值 值 描述 absolute 生成绝对定位的元素,相对于 static ...
- CSS position属性---absolute与relative
详情请点击此链接 http://www.cnblogs.com/polk6/archive/2013/07/26/3214847.html
- CSS - position属性小结
Relative: 属于文档流,针对自身进行偏移: Absolute: 脱离文档流,针对最近的定位元素进行偏移,如果没有,则针对根元素,即body标签尽心偏移: Fixed: 和absolute基本一 ...
随机推荐
- API接口重复提交
重复提交的几种情况1.利用JavaScript防止表单重复提交 按钮禁用2.利用Session令牌防止表单重复提交 具体的做法:在服务器端生成一个唯一的随机标识号,专业术语称为Token(令牌),同时 ...
- java学习二 数据类型自动提升 0x开头的数据是 16进制且是int型
变量只能定义一次,不能定义两次, 变量的作用域:当前的大括号与子括号才有效 变量的作用:存储值,取值 整型:向上自动升级,向下强制降级 char,byte,shot参与运算时候自动提升为int型 因为 ...
- A · F · O —— JLOI2018翻车记（附Day1简要题解）
JLOI2018翻车记 并不知道该怎么写... 算了还是按照标准剧情来吧 这应该是一篇写得非常差的流水账... 2018.04.04 Day -1 省选前在机房的最后一天. 压力并不是很大,毕竟联赛 ...
- django学习笔记-1
1.背景说明 django版本:1.8.2 python版本:3.6.5 pip版本:pip 18.0 以紫红色标注的为python文件中的示例代码. 2.安装django pip install d ...
- 使用Metasploit绕过UAC的多种方法
一.用户帐户控制(UAC)简介 在本文中,我们将简要介绍一下用户帐户控制,即UAC.我们还将研究它如何潜在地保护免受恶意软件的攻击并忽略UAC提示可能给系统带来的一些问题. 1.什么是用户帐户控制 ...
- 洛谷P3227 切糕
最小割模板. 题意:你要在一个三维点阵的每个竖条中删去一个点,使得删去的点权和最小. 且相邻(四联通)的两竖条之间删的点的z坐标之差的绝对值不超过D. 解: 首先把这些都串起来,点边转化,就变成最小割 ...
- fidder及Charles使用
1. fidder抓https包的基本配置,可参见以下博文 http://blog.csdn.net/idlear/article/details/50999490 2. 遇到问题:抓包看只有Tunn ...
- kubernetes 的pod控制器
转载于网络 pod是kubernetes的最小单元,自主式创建的pod删除就没有了,但是通过资源控制器创建的pod如果删除还会重建.pod控制器就是用于实现代替我们去管理pod的中间层,并帮我们确 ...
- css原生变量var()
了解css/css3原生变量var 阮一峰css变量教程 深入学习css自定义属性(css变量)
- 那些年的 网络通信之 TCP/IP 传输控制协议 ip 加 端口 ---
/* 一个文本小写转换为大写的小程序,当客户端从键盘录入一串字符串发送到服务端服务端转换为大写返回给客户端 */ import java.io.*; import java.net.*; class ...