认真学习CSS3-问题收集-102号-关于定位

css中有关于定位的一个属性position。

在w3cschool中，position的介绍如下：

值	描述
absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。 元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。 因此，"left:20" 会向元素的 LEFT 位置添加 20 像素。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit	规定应该从父元素继承 position 属性的值。

注：w3cschool的介绍，有时候是不完整的。除了以上的，还有一个sticky属性，具体可以看mdn:

    The element is positioned according to the normal flow of the document, 
    and then offset relative to its nearest scrolling ancestor and containing block (nearest block-level ancestor),
    including table-related elements, based on the values of top, right, bottom, and left. 
    The offset does not affect the position of any other elements.

    This value always creates a new stacking context. 
    Note that a sticky element "sticks" to its nearest ancestor that has a "scrolling mechanism" (created when overflow is hidden, scroll, auto, or overlay), 
    even if that ancestor isn't the nearest actually scrolling ancestor. This effectively inhibits any "sticky" behavior (see the GitHub issue on W3C CSSWG).

从这个介绍看，sticky还是有不少使用场景的!

公司有个老项目，使用百度的webuploader作为上传组件，按照例子编写。

在页面高度不是很大的情况下，很正常，但是当页面高度比较高的时候（页面需要scroll)的时候，发现点击总是没有任何的反应。

摸索了半天，发现响应事件的组件（不可见）的位置属性是：abosulute。

又看了下baidu官方的例子，如下图：

问题是，webuploader计算的位置并不准确（由于某些设置），所以只能手动修改了：

[id^="rt_rt_"]{
            position: relative !important;
            display:inherit !important;
            width:100px!important;
            height:20px!important;
            margin-top: -20px;
        }