Flexbox - specific positioning problem. Content div hovering header - html

Question

I've got some problems with specific element positioning. Could you give me any advice how to make it works?
It seems that buttons should be a part of content div but I don't really know how to do this. I tried many ideas but without any result.
Thanks in advance :)
My current code:
.header {
width: 100%;
background-color: red;
height: 65px;
}
.container {
display: flex;
flex-direction: column;
width: 100%;
justify-content: center;
align-items: center;
}
.item {
width: 700px;
height: 100px;
background-color: grey;
}
<div class="header"></div>
<div class="container">
<div class="item" style="background-color: red; height: 65px;">
<button>test</button>
</div>
<div class="item"></div>
</div>
I have no clue how to set div with buttons to be above header div. I tried with position relative but without success.
I know that it can be achieved by setting maring-top in container div. But is there any more elegant solution?

Answer 1

Well if you wanted to make a template as you mentioned above in the attached picture, I would say you won't need to define a new div above your container as the independent div and you should wrap all your header items into one division and make them flex with related justify-content and align-items, the flexbox with reacting to this as two different items that two of them (first button and header item) are wrapped into one div and the other one is a simple button (you can wrap it into another div too if you wanted) then with the justify-content: space-between they will force to the two endpoints of the division with space between them. Then you should do the same with your first wrapped items in div but in this one, you should add specific width to the division to make the justify-content: space-between work properly.
I add the simple code snippet below for more illustration, you can use it freely.
.header {
background-color: red;
padding: 10px 40px;
display: flex;
justify-content: space-between;
align-items: center;
}
.header button {
background-color: yellow;
font-weight: bold;
border: none;
}
.header span {
color: white;
}
.header-left {
width: 130px;
display: flex;
justify-content: space-between;
align-items: center;
}
.container {
max-width: 100%;
}
.item {
width: 200px
min-height: 400px;
margin: 0 40px;
padding: 100px;
background-color: lightgrey;
}
.item > p {
text-align: center;
}
<div class="header">
<div class="header-left">
<button>btn</button>
<span>header</span>
</div>
<button>btn</button>
</div>
<div class="container">
<div class="item">
<p>content</p>
</div>
</div>

Answer 2

If I am not getting it wrong, then you want the code of the button to be inside of container and on web page it should be shown on header. If this is what you are looking for then you can try the below code:
.header {
width: 100%;
background-color: red;
height: 65px;
}
.container {
display: flex;
flex-direction: column;
width: 100%;
justify-content: center;
align-items: center;
position: relative
}
.container button {
position: absolute;
top: -30px; // you can change it accordingly
}
.item {
width: 700px;
height: 100px;
background-color: grey;
}
<div class="header"></div>
<div class="container">
<button>test</button>
<div class="item"></div>
</div>