I have a web page at http://form.kr/q/swap13/
If you click the menu1 menu2 or menu3 after uploading the page, the menu1 menu2 or menu3 element will be shown just above the main contents.
Some of main contents, especially in the center area horizontally, will be hidden by the menu element.
Okay, so far so good.
My problem is in the position of the main contents.
The position of the main contents is below the menu button wrap.
I like to put the main contents is under the menu button wrap.
The code below is one of my trails for it.
.main{
position:absolute;
top:0px;
}
And the code below on the button related is another trial for it.
z-index:3;
How can I make the main contents to output from the top?
Of course that will affect the position of the revealed elements but I have no real idea where you want those now as your posts never have any logic to them I guess you are just playing around and trying things out ;). The revealed divs will now be on top of the buttons so you won’t be able to use the buttons. You would need to change the html so that the revealed buttons are inside the button-wrap html and then they will appear below the buttons.
<div class="button-wrap">
<div data-destination="menu1" class="button">menu1</div>
<div data-destination="menu2" class="button">menu2</div>
<div data-destination="menu3" class="button">menu3</div>
<div class="menu" id="menu1">
This is menu1 element. This is menu1 element. This is menu1 element.
</div>
<div class="menu menu2 " id="menu2">
This is menu2 element. This is menu2 element.
This is menu2 element. This is menu2 element. This is menu2 element.
This is menu2 element. This is menu2 element. This is menu2 element.
This is menu2 element. This is menu2 element. This is menu2 element. This is my DIV2 element.
</div>
<div class="menu menu3" id="menu3">
This is menu3 element.
</div>
</div>
The problem with making things up as you go along is that you end with the wrong code for the new situation. Html is usually built to satisfy the constraints of the design so when you change the constraints considerably you have to change the html. You can’t just add something and expect it to work.
You need to adjust the html to accommodate a new block within that context as you can’t have the new block as a child of the flex block otherwise it behaves like the button.
