html - 无法在容器内定位元素

Question

这是一个 JSFiddle：http: //jsfiddle.net/AndyMP/5NzYm/1/

我正在尝试将 Blog 元素放置在第三个容器的左上角。但它的位置在页面的左上角。

<home class="grid_block">2</home>
    <home class="grid_block">3</home>
    <home class="grid_block">
        <block class="update_type">Blog</block>
</home>

home.grid_block {
    float: left;
    overflow: hidden;
    display: inline-block;
    height: 224px;
    width: 23.35%;
    margin: 0 2.2% 2.2% 0;
    background-color: #CCC;
}
block.update_type {
    position: absolute;
    z-index: 50;
    top: 0;
    left: 0;
    padding: 25px;
    text-align: center;
    background: #313131;
}

Answer 1

您需要选择器的position: relative样式home.grid-block。父容器需要相对位置才能拥有任何绝对定位的子容器。

Answer 2

添加position:relative;到容器：

home.grid_block {
    position: relative;
    float: left;
    overflow: hidden;
    display: inline-block;
    height: 224px;
    width: 23.35%;
    margin: 0 2.2% 2.2% 0;
    background-color: #CCC;
}

Answer 3

轻松修复。只需添加position:relative到home.grid_block

home.grid_block {
    float: left;
    overflow: hidden;
    display: inline-block;
    height: 224px;
    width: 23.35%;
    margin: 0 2.2% 2.2% 0;
    background-color: #CCC;
    position:relative;
}

jsFiddle 示例

绝对定位的元素是相对于其最近定位的祖先定位的。您只需将该祖先设为 .grid_block。