Why does the size of a div element change when changing position from fixed to absolute?

I have a div containing some text. This div used to be position:fixed, but for some reasons I need it to be position:absolute.

However, when changing it from fixed to static its size chang开发者_Go百科ed (the "auto-sizing" during fixed display was nice and should be preserved).

Here's a minimal example: http://jsfiddle.net/ThiefMaster/yBRa9/3/

I'm looking for a way to keep position:absolute without the element shrinking to the lowest possible size.

Using JavaScript it's easy to achieve but if it could be done without additional JS it would be nice.

Here Check it. I used a span with inline-block, seems to do what you want _{(Of course, If I had understood your question properly)}.

elements with absolute positioning doesn't inherit the parent's width. You will have to set width or min-width

I faced the same problem. I read Teneff's answer and fixed it by setting width: 100%. Not confident if this is the best way to do things because I am new. Here is an example:

HTML:

<div id="slider">   
<div class="slide">
                    <div class="slide-copy">
                        <h2>Slide</h2>
                        <p>Sliding time</p>                     
                    </div>
                    <img src="http://images.clipartpanda.com/spring-clip-art-spring-clip-art.jpg" alt="an image">
                </div>
</div>

CSS:

#slider {
    width: 940px;
    height: 350px;
    position: relative;
    overflow: hidden;
    float: left;
    padding: 3px;
    border: #666 solid 2px;
    border-radius: 5px;
}

.slide-copy {
    position: absolute;
    bottom: 0px;
    left:0;
    padding: 20px;
    background: #7f7f7f;
    background: rgba(0,0,0,0.5);
}