хочу понять позиционирование

[rtl_one]

live:

https://jsfiddle.net/5fL1xn9q/

Дублирую:

div.wrapper {

position: absolute;

top: 0px;

height: 500px;

width: 600px;

border: 4px outset grey;

}

div.title {

position: absolute;

top: 0px;

height: 28px;

width: 590px;

border-bottom: groove 2px #aaa;

padding: 5px 5px 5px 5px;

line-height: 125%;

background-color: green;

}

div.content1 {

position: absolute;

top: 40px;

height: 455px;

width: 590px;

padding: 5px;

overflow: auto;

/* background-color: #ffffff; */

background-color: red;

opacity: 10%

}

Тестовое окно

Это еще одно окно. Значение атрибута z-index этого окна заставляет его расположиться поверх другого. За счет CSS-стилей содержимое этого окна будет выглядеть полупрозрачным в броузерах, поддерживаемых такую возможность множество строк для демонстрации прокрутки 1

2

3

4

5

6

7

8

9

0

1

2

3

4

5

6

7

8

9

0

По wrapper вопросов нет. Мы просто создаем объект высотой 500px и шириной 600px и делаем border 4px. Вопросы возникают далее. div.title: значит мы создаем хидер "окна", его размеры 28px + 2px border. Далее, т.к у нас width == 590px, то нам надо сделать padding-left: 5px, padding-right: 5px;. Ок, по ширине мы div.title растянули. Далее мы смотрим, сколько нам делать padding-top. А вот тут вопрос. По идее, div.wrapper border == 4px. Значит мы должны отступить...4px или 5px ?

Далее div.content1: по ширине всё ясно. Мы делаем width 590px, и padding-left: 5px, padding-right:5px растягиваем объект до ширины 600px. Но по вертикали опять вопрос: мы смотрим, что у нас div.title равно 28px(height) + 2px(border) + 5px(padding-top) + 5px(padding-bottom) == 40px. Ок, сколько мы должны отступить top? 40px или 41px ? Я понимаю, что padding'om мы можем выровнять столько, сколько нам нужно, но в целом как правильно оступать-то ?

[Xenia Wanger]

Не поняла как связан пэддинг .title с бордером у .wrapper?

Для .content сверху нужно отступить высоту .title, в вашем случае 38px (28+5+5) + border-bottom 2px = итого 40px

[Switch74]

Ок, сколько мы должны отступить top?

ни сколько не нужно отступать content1 у вас будет сразу за title,

а вот если вы хотите, чтобы content1 занял оставшееся пространство в wrapper, то его высота должна быть 500(высота wrapper) - 40(высота title) - 2*5(padding content1) = 450px

 

а проще было бы конечно все это сделать через position:absolute; top и bottom