为什么写这篇文章？
最近遇到一个需求，在页面中定义一个组件，组件可以自由拖动，但在组件内还有一些其它组件，如何在拖动外层组件的同时，让内层组件和外层组件一起被拖动？
实现这个需求有很多方案，最简单的当然是使用很多大神们写好的组件了φ(>ω<*) ，但这个需求让我想起了曾经一次面试，总有一些问题，是我们学习过程中忘记和忽略的，当时也是这么一个问题，和这个大体类似，这家公司貌似是做可视化的，具体的不是很清楚，因为面试失败了嘛o(╥﹏╥)o，当时面试官和我解析了一下这个问题，其实解决问题的思路大概就是关于CSS的使用，当时学习CSS的时候可能仅只是记住了一部分表层，也坑能当时记住了，后来随着长时间用不到，就忘了￣▽￣；
关于Position属性的使用
position属性指定了元素的定位类型。
static:没有定位，遵循正常的文档流对象，也许你感觉没啥用，貌似确实没啥用，写了这么多年代码，就没用过！！但我查了一下，还真有用，在全部元素都被定位了的情况下，有一些元素不需要被定位，就可以使用这个属性。
relative:相对定位，相对于其正常位置进行定位，我当初有一个项目是做Weex开发，竟然没有背景图片属性！想用背景图只能用图片定位定上去，哎，也不知道现在修复了没有。
absolute:绝对定位，划重点，当初就是栽在这个上面的，绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>，这个定位结合relative就可以解决刚才那个需求，外层relative，内层absolute。
fixed:绝对定位，元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。这个用的也挺多，这个没什么坑，就不多说了。
sticky:粘性定位，relative和fixed的结合:当元素在屏幕内，表现为relative，滚出显示器屏幕的时候，表现为fixed,兼容性感觉不是很好，用得不多。
<div class="pos-out">
<div class="pos-in"></div>
</div>.pos-out {
position: relative;
top: 50px;
width: 500px;
height: 500px;
background-color: aqua;
.pos-in {
position: absolute;
top: 0px;
width: 100px;
height: 100px;
background-color: darkblue;
}
}
426
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
