проблема разметки о div и дыре в его границе

Question

возможно ли иметь элемент <div style="border:1px solid red"> (с некоторым содержимым, не имеет значения, что это такое) и некоторый элемент вне этого div, который имеет свойство background:white, и перекрывает этот div как минимум на 1 пиксель ? так что граница div будет не идеальной формы прямоугольника, а с "дырой"? и, предпочтительно, это не использует абсолютное позиционирование. и это работает во всех основных браузерах ..? пожалуйста, дайте мне хоть какую-то идею, или, возможно, это не сработает вообще

Answer 1

Вы можете использовать отрицательное поле:

<div style="border:1px solid red; background: blue;">Stuff
    <div style="background: white; margin-left: -1px;"> Other Stuff</div>
</div>

http://jsfiddle.net/VzU8w/1/

И если элемент находится вне элемента border: red:

<div style="border:1px solid red; background: yellow;">Stuff</div>
<div style="background: white; margin-top: -1px;">Other Stuff</div>

http://jsfiddle.net/VzU8w/2/

Answer 2

Если вы не используете абсолютное позиционирование, используйте float и margin