关于position的用法

昨天发现的一个问题：

因为做的是移动端前端开发，使用的apicloud技术，发现普通的打开一个frame，出现一个问题，frame是可以滚动的，当然这个可以设置，但是我的内容是不确定的，所以必须要求他可以滚动，但是有个需求是将两个按钮设置到frame的底部。

我考虑过使用绝对布局，但是使用后发现不起作用，后来请教别人发现了一个从未用过但是见过的属性，就是position: fixed;width: 100%;bottom: 20px;

后来了解了他的用法知道了他是相对于body的。

常用的position的值是relative和absolute，自己也是懵懂的，后来百度也试过很多，现在谢谢自己现在的理解，以后用的多了，再补充进来。

先来个最简单的例子

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" /><title>云API</title><link rel="stylesheet" type="text/css" href="../css/api.css" /><link rel="stylesheet" type="text/css" href="../css/style.css" /><link rel="stylesheet" type="text/css" href="../css/aui.2.0.css" /><style>.div1{position: relative;height: 100px;width: 100px;background-color: #039BE5;margin-left: 80px;margin-top: 60px;}.div2{position: absolute;width: 30px;height: 30px;background-color: darkcyan;top: 20px;left: 20px;}.div3{position: absolute;width: 80px;height: 80px;opacity: 0.5;background-color: hotpink;top: 10px;left: 10px;}

　　　　　　　　.div4{
position: relative;
width: 80px;
height: 80px;
opacity: 0.8;
background-color: aquamarine;
top: 10px;
left: 10px;
}

        </style></head><body><div class="div1">div1<div class="div2">div2</div></div><div class="div3">div3</div>

<div class="div4">
我是div4
</div>

    </body>
</html>

解释：

以上div3 是单独的元素，他的直接父元素是body，他的绝对定位就是相对body的，

div2 的直接父元素是div1，这种情况下，只有把div1设置为relative，div2 的absolute 才会是相对于div1的，也就是说，div2会跟着div1动。

也证明了div一旦设置为absolute，他就会脱离文档流，即和普通的div不在同一个平面[我觉得可以这样理解]。所以可以覆盖别的div。

转载于:https://www.cnblogs.com/zlj1027/p/5738223.html

关于position的用法相关推荐

html里position属性,科技常识：详解html中 position属性用法（四种）
今天小编跟大家讲解下有关详解html中 position属性用法(四种) ,相信小伙伴们对这个话题应该有所关注吧,小编也收集到了有关详解html中 position属性用法(四种) 的相关资料,希望小 ...
csss属性 position的用法真的很好用
值描述 absolute 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位. 元素的位置通过 "left", "top", " ...
position的用法小结
position的常用属性有absolute,relative ,fixed. 其中fixed为固定位置,位置不随着滚动条变化. 绝对定位是根据最近的有position属性的父元素定位的.值得一提的是 ...
如何使html中的din居中,HTML+CSS－－position大法好
其实在HTML和CSS的学习中,css的position属性应该是难点之一,难在你需要静下心来仔细搞清楚它的每一个值的意义.效果和用法.但是它的功能很强大,效果也是很令人惊艳的,因为你可以用它去实现一 ...
position:sticky布局
用户的屏幕越来越大,而页面太宽的话会不宜阅读,所以绝大部分网站的主体宽度和之前相比没有太大的变化,于是浏览器中就有越来越多的空白区域,所以你可能注意到很多网站开始在滚动的时候让一部分内容保持可见,比如 ...
MySQL字符串处理函数的用法及使用举例
MySQL字符串处理函数的用法及使用举例 MySQL提供了处理字符串的相关函数.现对这些函数的功能及用法进行介绍并举例. 创建数据表emp并输入数据: create table customer(c_ ...
position:sticky介绍
用户的屏幕越来越大,而页面太宽的话会不宜阅读,所以绝大部分网站的主体宽度和之前相比没有太大的变化,于是浏览器中就有越来越多的空白区域,所以你可能注意到很多网站开始在滚动的时候让一部分内容保持可见,比如 ...
JavaScript如何获取/计算页面元素的offset？
问题通过点击一控件,在控件的下面显示一个浮动层,通常的做法是:获取此控件的offset值,再计算出浮动层的top,left等css属性的值,赋值即可. 那么下面就看一下如何获取控件的offset值 ...
CSS HACK 区别 IE6、IE7、IE8、Firefox兼容性
转载链接:http://developer.51cto.com/art/201009/226787_1.htm 本文向大家描述一下如何使用CSS HACK区别IE6.IE7.IE8.Firefox兼容 ...

关于position的用法

关于position的用法相关推荐

最新文章

热门文章