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基本一 ...
随机推荐
- button 和 submit 的区别
表单提交中button和submit的区别submit是button的一个特例,也是button的一种,它把提交这个动作自动集成了,submit和button,二者都以按钮的形式展现,看起来都是按钮, ...
- pgm5
这部分讨论 inference 里面基本的问题,即计算 这类 query,这一般可以认为等价于计算 ,因为我们只需要重新 normalize 一下关于 的分布就得到了需要的值,特别是像 MAP 这类 ...
- css雪碧（CSS Sprite）和css3过渡效果综合应用
在网页中我们经常可以看到,有些图片在鼠标经过的时候,有一个上下或左右的滑动效果,很实用页很方便,今天正好用到,拿来和大家分享一下,有什么不对或意见欢迎指正. html部分如下,这里本来打算用jq来着, ...
- Codeforces Round #426 (Div. 1) B The Bakery （线段树+dp）
B. The Bakery time limit per test 2.5 seconds memory limit per test 256 megabytes input standard inp ...
- Emacs 安装配置使用教程
Emacs 安装配置使用教程 来源 https://www.jianshu.com/u/a27b97f900f7 序|Preface 先来一篇有趣的简介:Emacs和Vim:神的编辑器和编辑器之神 - ...
- 以太坊 链私有链环境搭建（windows）
摸索以太坊区块链技术几个月了.最近打算逐步的把自己学到的东西和大家分享一下.在阅读本文之前,希望大家能对区块链的概念能有所了解.这样操作过程中的环节理解更深入.下面开始进入准备.因为本次是window ...
- LOJ#2983. 「WC2019」数树
传送门 抄题解 \(Task0\),随便做一下,设 \(cnt\) 为相同的边的个数,输出 \(y^{n-cnt}\) \(Task1\),给定其中一棵树 设初始答案为 \(y^n\),首先可以发现, ...
- NO.2: 尽量以const,enum,inline 替换 #define
1.首先#define 定义不重视作用域(scope),虽然可以#undef控制,但是不美观,还存在多次替换的问题,以及没有任何封装性. 2.const XXX_XX,保证其常量性以及可控的作用域,如 ...
- Zabbix应用六:Zabbix监控Redis
利用Zabbix监控Redis Zabbix监控redis就比较简单了,因为zabbix官方提供了监控redis的模版和脚本,而且脚本有nodejs和python两种,下载地址:https://git ...
- 第六节 事务XML方式[声明方式]
事务管理: 管理事务,管理数据,数据完整性和一致性 事务[业务逻辑] : 由一系列的动作[查询书价格,更新库存,更新余额],组成一个单元[买书业务], 当我们动作当中有一个错了,全错~ ACID 原子 ...