Question

我试图覆盖图像。我之前做过一段时间，但由于某种原因，今天我显然忘记了一些事情。它似乎占据了整个页面的宽度，而不是它的父级：

    #work_item {
        position: relative;
        width: auto;
    }

    #work_item img {}

    #work_item a {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 30;
        height: 100%;
        width: 100%;
        background: #000;
        color: #FFF;
           }

            <div id='work_item'>
        <img src="" />
        <a href="#">Click Here!</a>
    </div>

任何帮助？

Answer 1

#work_item {
    display: inline-block;
    position: relative;
    left: 0px;
    top: 0px;
    z-index: 1;
    height: auto;
    width: auto;
}

#work_item img {
    position: relative;
    z-index: 1;
    left: 0px;
    top: 0px;
}

#work_item a {
    display: block;
    position: absolute;
    top: 0px;
    left: 0px;
    z-index: 30;
    height: 100%;
    width: 100%;
    background: rgba(0,0,0,0.8);
    color: #FFF;
}

<div id='work_item'> 
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQfMwj05-cLtN4hGPTSKJcsElDOeNTW65rlmQKXzRo5ZCbFmvuY0dccZMU" /> 
    <a href="#">Click Here!</a> 
</div>

演示： http://jsfiddle.net/38v3h/

Answer 2

如果您的意思是#work_item：

，请添加此代码

#work_item {
    position: relative;
    width: auto;
    display: inline-block;
}

小提琴：http://jsfiddle.net/CRY3g/

Answer 3

div是一个块元素，无论其内容的宽度如何，它都占据其父级的整个宽度。有很多方法可以使div #work_item包装内容。

显示内联块;

    #work_item {
        position: relative;
        width: auto;
        display inline-block;
    }

你也可以浮动div：

  #work_item {
        position: relative;
        width: auto;
        float: left;
    }

宽度不是从父级继承？

3 个答案:

小提琴：http://jsfiddle.net/CRY3g/