Пробле с div версткой при поднятии внутреннего div margino'ом. как быть?

Question

[Nathan Stark]

Есть вот такая "верстка" codepen.io/NathanStark/pen/vOZwpK?editors=110
Мне надо поднять блока title (в котром "поднять"), так что бы граница блока SecWrapper проходила по середине блока title
На примере выше она почти так и работает, тольо еще подымает верх блок "MainBlock".

Еще раз поясню мне надо что бы бло MainBlock не куда не двигался а оставался внутри SecWrapper, мне надо поднять только title. Использовать ablosute не вариант из за строгой фиксации. Может есть какие еще идеи ?

Answer 1

[nofuture trustnoone]

.MainBlock {
   width: 960px;
   margin: 0 auto;
   background: #00aa00;
   height: 250px;
   position:relative;
 }
 
 .MainBlock > .title {
   height: 50px;
   background-color: #b08e40;
   width: 200px;
   margin-top:-25px;
   position:absolute;
 }

почему такой варинат не катит? тайтл крутится относительно мейна и всё.

.MainBlock > .title {
   background-color: #b08e40;
   display:inline-block;
   line-height:50px;
   position:relative;
   top:-25px;
 }

продолжая идею автора ниже, запилить инлайн блок и сделать хитрее.

Answer 2

[Борис Якушев]

Если я правильно понял какой блок необходимо поднять, то используйте:

.MainBlock > .title {
   position: relative;
   top:-52px;
   width: 200px;
   height: 50px;
   background-color: #b08e40;
  
 }

Comments

[Nathan Stark]

Спасибо то что надо !

[Борис Якушев]

MattLe: не за что

Answer 3

[Valery]

Можно задать родителю однопиксельный padding сверху, чтобы на него не действовал отрицательный margin:

.MainBlock {
    padding-top: 1px;
}

Comments

[Nathan Stark]

мне ваш вариант понравился хот и не очень эстетичный )