1

Здравствуйте.
Как можно сделать так, чтобы элемент внутри элемента, мог выходить за его границы. Примерно так:

alt text

Тут, синим выделен внутренний элемент. Красным - элемент, содержащий синий. Ну, надеюсь понятно. И внешний и внутренний элементы - элементы DIV.

PS
Не использовать абсолютное позиционирование (position: absolute)

2
  • position absolut не проходит? чисто спортивный интерес!
    – Palmervan
    27 янв 2012 в 10:18
  • Не. Нельзя. 27 янв 2012 в 10:19

2 ответа 2

2

Ну нельзя position: absolute, так используйте position: relative. Посмотреть примерчик.

<div>
    <div>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 
</div>

и

div {
    background: #900;
    width: 200px;
    height: 300px;
    margin: 0;
    padding-top: 10px;
    position: relative;
    z-index: 5;
}
div div {
    background: #FF0;
    width: 400px;
    height: 100px;
    margin-left: 10px;
    position: relative;
    z-index: 10;
}

Для второго варианта

div {
    background: #900;
    width: 300px;
    height: 200px;
    margin: 0;
    margin-bottom: -300px;
    top: 150px;
    position: relative;
    z-index: 5;
}
div div {
    background: #FF0;
    width: 200px;
    height: 300px;
    top: -150px;
    margin-left: 10px;
    margin-top: 10px;
    position: relative;
    z-index: 10;
}
4
  • Посмотрите, что получается, если пытаюсь сделать второй вариант ( jsfiddle.net/9kQap/1 ). Мне надо, чтобы уходил квадрат вверх, а не вниз. 27 янв 2012 в 10:34
  • Старею я наверное )) Хоть стреляйте, но не могу понять зачем вам это надо, но вот можно поизвращаться и таким образом.
    – Deonis
    27 янв 2012 в 12:21
  • А как у вас это получилось?!! Не забудьте в ответ код перенести. 27 янв 2012 в 12:27
  • Как получилось? Этот вопрос меня больше в тупик поставил, чем вопрос вашего поста ))) Может потому, что веб-разработками совсем недавно занимаюсь... еще и восьми лет не прошло. Поэтому в памяти всё свежо ;)
    – Deonis
    27 янв 2012 в 12:34
1

У меня был обратный вопрос. float не поможет?

1
  • Не. Ни один из ответов не решил проблему. С первым вариантом проблем нет, если только он будет именно таким. Вот с реализацией второго - проблемы. Элемент уезжает вниз, а мне надо вверх. 27 янв 2012 в 10:30

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.