css的postion属性

时间 2019-12-04

标签 css postion 属性栏目 CSS 繁體版

原文原文链接

首先，来段代码进行css的postion属性的学习之路。css

<html>
<head>
<title> position </title>
<style>
body { margin: 0px; padding: 0px; color: white; text-align: right; }
.box { width: 50px; border: dotted yellow; }
.square { width: 100px; height: 100px; }
.r { background-color: red; }
.g { background-color: green; }
.b { background-color: blue; }
#l { float: left; }
#r { float: right; }
#abs { position: absolute; top: 150px; left: 50px; }
#rel { position: relative; top: 150px; left: -50px; }
</style>
</head>

<body>
<div class="box" id="l">
	<div class="r" class="square" id="abs">R</div>
	<div class="g" class="square">G</div>
	<div class="b" class="square">B</div>
</div>
<div class="box" id="r">
	<div class="r" class="square" id="rel">R</div>
	<div class="g" class="square">G</div>
	<div class="b" class="square">B</div>
</div>
</body>
</html>

其实这段代码写的不是很规范，例如document,meta等，咱们就先忽视这个问题。。。html

postion属性有四个值，分别是static，absolute， relative， fixed。其中static和relative两个属性值是跟文档流有关，其余两个跟文档流无关。那么什么是叫文档流呢？个人理解是文档流就是对文档的读入和输出顺序，例如上述所贴的代码，box类下有三个div，若是咱们忽视它们的css样式，那么它们在浏览器的展现方式是从上到下是R,G,B，而且每个占用一层。web
static，默认的position值，若是对元素进行TLBR操做，是不起任何做用的（怪不得刚开始没设置position的值，根本没发生偏移，囧）。浏览器
relative，相对定位。其实这里的相对定位，是相对它自己在正常文档流的位置的偏移，尽管偏移了，它本来在正常文档流的位置还在保存着，例如上例的结果，你在浏览器中能够看到右上角的L的位置还存在，尽管L已经飘走了。因此尽管L进行了相对定位，可是它的存在仍是对G和B有影响，并不抽离出文档流。app
absolute，绝对定位。这里的绝对定位，是指它自己被抽离出文档流，即一旦它的positive设置为absolute，它原先在文档流中所占的位置就被其余的元素所占用。那么对它进行TLBR操做则是怎么定位呢？它会首先寻找距离它最近的父元素，而且该父元素的position属性值不为static，若是查找不到，ok，这是它就会相对body进行TLBR操做。post
fixed，该属性值相对于浏览器窗口，所以拖动滚动条不影响它在窗口中的位置。学习

之因此研究position是由于看到了阿里2014的一个线上笔试题，以下：测试

有两个盒子A和B，其中B在A盒子内，如今要求实现B在A中水平方向和垂直方向均居中。code

.A {
    position: relative;
    width: 500px;
    height: 500px;
    background-color: green;}
.B {
    position: absolute;
    max-width: 300px;
    max-height: 300px;
    background-color: blue;}

这里设定A为宽度和高度必定的relative定位，B相对A进行TLBR操做使其相对A居中。htm

刚开始拿到这题时，我把它想的巨简单，既然B的父元素A相对定位，那么把B相对A的top进行50%，left进行50%偏移，不就居中了么？而后很happy的测试一下，果真居中，好吧，其实只是B的左上角坐标居中，当B中有content、border、padding中任何一项内容时，就不知足要求了，仍是继续思考怎么解决。

接下来想到一种比较暴力的方法，由于题中并无要求用的是CSS解决这个问题，因此想到了用JS实现。首先计算出A的宽度，固然这个宽度是padding+border+content。先把代码贴上，明天继续分析。

<script>
			var b = document.getElementsByClassName('B')[0];
			var a = document.getElementsByClassName('A')[0];
			var width = b.offsetWidth; 
			var height = b.offsetHeight;
			var w = a.offsetWidth;
			var h = a.offsetHeight;
			b.style.marginLeft = (w - width) / 2 + 'px';
			b.style.marginTop = (h - height) / 2 + 'px';
		</script>

后来在网上看到有种解法，把B的position从新设置为非absolute，而后添加A的css样式

.A {
    display: -webkit-box;
    -webkit-box-align: center;
    -webkit-box-pack: center;}

这样也能解决问题，但是我以为既然题目要求A是relative，B是absolute，篡改题意这种作法不可取

1. css的postion属性
2. Css POSTION Left top
3. CSS content 属性 CSS counter-increment 属性 CSS counter-reset 属性
4. CSS position属性、float属性
5. css的position属性
6. css的background属性
7. CSS 的 appearance 属性
8. css的direction属性
9. CSS的display属性
10. CSS的zoom属性
更多相关文章...
• jQuery Mobile CSS 类 - jQuery Mobile 教程
• CSS 指南 - 网站建设指南
• 互联网组织的未来：剖析GitHub员工的任性之源
• JDK13 GA发布：5大特性解读