Почему размер элемента div изменяется при изменении положения с фиксированного на абсолютное? - PullRequest
2 голосов
/ 05 апреля 2011

У меня есть div, содержащий некоторый текст. Этот div раньше был position:fixed, но по некоторым причинам мне нужно, чтобы он был position:absolute.

Однако, при изменении его с фиксированного на статический, его размер изменился («авторазмер» во время отображения fixed был хорош и должен быть сохранен).

Вот минимальный пример: http://jsfiddle.net/ThiefMaster/yBRa9/3/

Я ищу способ сохранить position:absolute без сокращения элемента до минимально возможного размера.

Используя JavaScript, легко достичь , но если бы это можно было сделать без дополнительного JS, было бы неплохо.

Ответы [ 3 ]

3 голосов
/ 05 апреля 2011

Здесь Проверьте это. Я использовал диапазон с inline-block, кажется, делает то, что вы хотите (Конечно, если я правильно понял ваш вопрос) .

1 голос
/ 05 апреля 2011

элементов с абсолютным позиционированием не наследуют ширину родительского элемента. Вам нужно будет установить width или min-width

0 голосов
/ 23 ноября 2015

Я столкнулся с той же проблемой. Я прочитал ответ Тенефа и исправил его, установив ширину: 100%. Не уверен, что это лучший способ сделать что-то, потому что я новичок. Вот пример:

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);
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...