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基本一 ...
随机推荐
- HDU 2097 Sky数
http://acm.hdu.edu.cn/showproblem.php?pid=2097 Problem Description Sky从小喜欢奇特的东西,而且天生对数字特别敏感,一次偶然的机会, ...
- ThreadLocal 与 Synchronized区别
相同:ThreadLocal和线程同步机制都是为了解决多线程中相同变量的访问冲突问题.不同:Synchronized同步机制采用了“以时间换空间”的方式,仅提供一份变量,让不同的线程排队访问:而Thr ...
- [转帖] K8S 常用命令
k8s常用命令 原贴地址 查看集群信息: [root@kubernetes-master pods]# kubectl cluster-info kubectl cluster-info展示结果 k ...
- SQL 中LTrim、RTrim与Trim的用法
LTrim.RTrim与 Trim 函数 返回 Variant (String),其中包含指定字符串的拷贝,没有前导空白 (LTrim).尾随空白 (RTrim) 或前导和尾随空白 (Trim).语法 ...
- js new关键字
实现new 关键字只需4步 1. 声明一个对象: 2. 把这个对象的__proto__ 指向构造函数的 prototype; 3. 以构造函数为上下文执行这个对象: 4. 返回这个对象. 简洁的代码示 ...
- AtCoder Grand Contest 030 自闭记
A:阅读. #include<iostream> #include<cstdio> #include<cmath> #include<cstdlib> ...
- js判断checkbox是否选中
$('.div0 .checkbox1').prop('checked')选中返回 true未选中返回 false $('.div0').prop("checked", true) ...
- 【BZOJ1444】[JSOI2009]有趣的游戏（高斯消元，AC自动机）
[BZOJ1444][JSOI2009]有趣的游戏(高斯消元,AC自动机) 题面 BZOJ 题解 先把\(AC\)自动机构建出来,最好构成\(Trie\)图.然后这样子显然是在一个有向图中有一堆概率的 ...
- HGOI2010816 （NOIP 提高组模拟赛 day1）
Day1 210pts(含T1莫名的-10pts和T3莫名的-30pts) 100+70+40=210 rank 29 这道题第一眼看是字符串匹配问题什么KMP啊,又想KMP不会做啊,那就RK Has ...
- 各种蕴含算法思想的DP - 3
内容中包含 base64string 图片造成字符过多,拒绝显示