Поля и отрицательные поля

Question

Я всегда думал, что понимаю поля и отрицательные поля, но, очевидно, я не понимаю!Я только начал новый дизайн и уже столкнулся с проблемами.

У меня есть div (hill3Cont) и еще один div (hill3Hill), вложенный внутрь, и это CSS для них.

#hill3Cont
{
    width: 100%;
    background-image: url("images/grass.jpg");
}
#hill3Hill 
{
    margin: -100px 0 0 0;
    height: 600px;
    width: 100%;
    background: url("images/hill3.png") no-repeat center top;
}

Я применил отрицательное поле к вершине дочернего элемента div в надежде, что он вытолкнет этот контент за пределы родительского элемента div.Но это не так, это не двигается.Если я применяю положительное поле, это толкает родительский элемент div вместе с дочерним элементом внутри него.

Единственный способ заставить его вести себя правильно - использовать границу или переполнение, скрытое в родительском элементе div, но дизайн выигралне допускаю ни одного из них (я не хочу, чтобы границы и скрытые переполнения скрывали ребенка).

Возможно, это был просто длинный день, и я упускаю что-то общее!Заранее большое спасибо.

Редактировать: у меня есть решение, я поместил один верхний отступ для родительского div, padding: 1px 0 0 0. Это работает для моего дизайна, так что я счастлив, новсе еще стремится выяснить, что происходит.

Answer 1

Для дочернего элемента внутри родительского элемента вместо этого используйте относительную и отрицательную верхнюю позицию.

http://jsfiddle.net/GEwj3/3/

#hill3Cont
{
    margin-top: 50px;
    width: 200px;
    height: 200px;
    background-color: red;
}
#hill3Hill 
{
    height: 50px;
    width: 100px;
    background: blue;
    position: relative;
    top: -20px;
}

Answer 2

Похоже, проблема с сокращением полей:

http://www.seifi.org/css/understanding-taming-collapsing-margins-in-css.html

Answer 3

http://jsfiddle.net/XVanj/2/ проверьте это также

Answer 4

Мне не ясно, что отрицательные значения маржи должны давать желаемое поведение, а не рассматриваться как ноль.Я бы просто избегал их как потенциально неопределенного поведения.