0

ここに JSFiddle があります: http://jsfiddle.net/AndyMP/5NzYm/1/

3 番目のコンテナーの左上隅にブログ要素を配置しようとしています。しかし、その位置はページの左上にあります。

<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;
}
4

3 に答える 3

1

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;
}
于 2013-09-13T17:01:46.933 に答える
1

簡単に修正。追加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 にする必要がありました。

于 2013-09-13T17:01:50.277 に答える
1

セレクターposition: relativeにのスタイルが必要です。home.grid-block親コンテナーに絶対位置の子を含めるには、相対位置が必要です。

于 2013-09-13T17:03:08.817 に答える