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基本一 ...
随机推荐
- Alpha冲刺第6天
Alpha第六天 1.团队成员 郑西坤 031602542 (队长) 陈俊杰 031602504 陈顺兴 031602505 张胜男 031602540 廖钰萍 031602323 雷光游 03160 ...
- Linux命令（十一） 显示文件类型 file
命令介绍 file 命令是用来显示文件的类型,对于每个给定的参数,该命令试图将文件分类,分辨的类型有文本文件.可执行文件.压缩文件.或其它可理解的数据格式. 常用参数介绍 -b 不显示文件名称,只显示 ...
- vue 有关框架
iview-admin https://github.com/iview/iview-admin/ axios https://www.kancloud.cn/yunye/axios/234845
- 51Nod 1384 全排列
给出一个字符串S(可能有重复的字符),按照字典序从小到大,输出S包括的字符组成的所有排列.例如:S = "1312", 输出为: 1123 1132 1213 1231 131 ...
- 【BZOJ】1002：轮状病毒（基尔霍夫矩阵【附公式推导】或打表）
Description 轮状病毒有很多变种,所有轮状病毒的变种都是从一个轮状基产生的.一个N轮状基由圆环上N个不同的基原子和圆心处一个核原子构成的,2个原子之间的边表示这2个原子之间的信息通道.如下图 ...
- debian9部署jenkins
这里记录两种部署方式,一种是通过包管理工具直接安装,另一种是用tomcat作为web容器运行jenkins.个人倾向第一种,部署简单,而且维护起来方便很多. 用包管理工具aptitude部署jenki ...
- AIO + ByteBufferQueue + allocateDirect 终于可以与NIO的并发性能达到一致。
看到这个标题,你可能会惊讶,相比NIO,AIO不就是为了在高并发的情况下代替NIO的吗? 是的,没错,但是在并发不高的情况下,AIO的性能表现很多时候还不如NIO. 在一台机子上用ab进行并发压力测试 ...
- JS控制form表单action去向
http://blog.csdn.net/w709854369/article/details/6261624 不知道大家遇没遇到这种情况,当我们提交一个表单的时候,可能因为相关的参数不同而需提交给不 ...
- Centos7.4+openvpn-2.4.4+easy-rsa-3.0物理机安装教程
完整CentOS搭建OpenVPN服务环境图文教程 大福技术 关注 2016.02.17 09:28* 字数 3017 阅读 34000评论 18喜欢 21赞赏 3 对于OpenVPN环境有什么用途老 ...
- mongodb的认证(authentication)与授权(authorization)
一小白瞎整mongodb,认证部分被折磨的惨不忍睹,看厮可怜,特查了一下文档,浅显地总结一下mongodb认证(authentication)与授权(authorization)的联系. 创建的所有用 ...