Element positioning is incorrect

Question

Why is .logo not located in the middle? And if you add position: absolute to .iphone-6 , then it disappears, why is that?

 * { padding: 0; margin: 0; box-sizing: border-box; } .header-bg { background-image: url(images/bg/header.png); height: 1000px; background-repeat: no-repeat; background-size: cover; background-position: 45% 50%; border: 1px solid transparent; width: 100%; } .layout { width: 1170px; margin: 0 auto; } .burger-menu div { width: 20px; height: 2px; background-color: red; margin-bottom: 4px; } .logo { position: absolute; left: 50%; top: 0; } .top-menu { margin-top: 60px; position: relative; border: 1px solid red; } .top-menu a { text-decoration: none; color: #26272d; } .top-menu span { margin-left: 40px; } .top-menu span:first-of-type { margin-left: 0; } .menu1 { position: absolute; top: 0; left: 50px; } .menu2 { position: absolute; top: 0; right: 0; margin-top: -10px; } .menu2 button { background-color: #267df4; width: 125px; height: 40px; border-radius: 18px; color: white; background-image: url(images/icons/apple-icon.png); background-repeat: no-repeat; background-position: 16px 8px; border: none; } .menu2 button a { color: white; margin-left: 5px; } .top-text { text-align: center; margin-top: 140px; } .top-text h2 { font-size: 62px; margin-bottom: 50px; } .top-text p { margin-bottom: 65px; } .top-text button { width: 205px; height: 50px; border-radius: 22px; border: 2px solid #dadcdf; background-color: transparent; } .Iphone-6 { background-image: url(images/icons/iphone-6.png); background-repeat: no-repeat; height: 450px; margin-top: 70px; margin-left: 380px; }

 <div class="header-bg"> <div class="layout"> <div class="top-menu"> <div class="burger-menu"> <div class="burger-menu-top"></div> <div class="burger-menu-middle"></div> <div class="burger-menu-middle"></div> </div> <div class="menu1"> <span><a href="#">Tour</a></span> <span><a href="#">Features</a></span> <span><a href="#">Pricing</a></span> </div> <div class="logo"><a href="#">NewProvidence</a></div> <div class="menu2"> <span><a href="#">Help</a></span> <span><a href="#">Contacts</a></span> <span><button><a href="#">Get App</a></button></span> </div> </div> <div class="top-text"> <h2>What happens tomorrow?</h2> <p>The sight of the tumblers restored Bob Sawyer to a degree of eq</p> <button>Watch video</button> </div> <div class="Iphone-6"> </div> </div> </div>

Cheslab cheslab 188 one 9 · Accepted Answer · 2018-03-27T17:45:01

Why is .logo not located in the middle?

Because position: absolute + left: 50% does not set the element in the center, but moves it 50% of the width of the parent to the right. It turns out that he moves to the right too much and needs to be brought back a bit with the help of transform: translateX(-50%)

If you add position: absolute to .iphone-6 , then it disappears, why is that?

In fact, it does not disappear anywhere, but since it doesn’t have any content, it doesn’t have width. You can set the width strictly, for example: width: calc(100% - 380px) where 380px is the width specified by margin-left . But now the .iphone-6 block is positioned relative to the width of <body> , so that it is positioned relative to its direct parent .layout , it (the parent) needs to be set position: relative

 * { padding: 0; margin: 0; box-sizing: border-box; } .header-bg { background-image: url(images/bg/header.png); height: 1000px; background-repeat: no-repeat; background-size: cover; background-position: 45% 50%; border: 1px solid transparent; width: 100%; } .layout { width: 1170px; margin: 0 auto; position: relative; } .burger-menu div { width: 20px; height: 2px; background-color: red; margin-bottom: 4px; } .logo { position: absolute; left: 50%; top: 0; transform: translateX(-50%); } .top-menu { margin-top: 60px; position: relative; border: 1px solid red; } .top-menu a { text-decoration: none; color: #26272d; } .top-menu span { margin-left: 40px; } .top-menu span:first-of-type { margin-left: 0; } .menu1 { position: absolute; top: 0; left: 50px; } .menu2 { position: absolute; top: 0; right: 0; margin-top: -10px; } .menu2 button { background-color: #267df4; width: 125px; height: 40px; border-radius: 18px; color: white; background-image: url(images/icons/apple-icon.png); background-repeat: no-repeat; background-position: 16px 8px; border: none; } .menu2 button a { color: white; margin-left: 5px; } .top-text { text-align: center; margin-top: 140px; } .top-text h2 { font-size: 62px; margin-bottom: 50px; } .top-text p { margin-bottom: 65px; } .top-text button { width: 205px; height: 50px; border-radius: 22px; border: 2px solid #dadcdf; background-color: transparent; } .Iphone-6 { background-image: url(images/icons/iphone-6.png); background-repeat: no-repeat; height: 450px; margin-top: 70px; margin-left: 380px; position: absolute; width: calc(100% - 380px); background: rebeccapurple; }

 <div class="header-bg"> <div class="layout"> <div class="top-menu"> <div class="burger-menu"> <div class="burger-menu-top"></div> <div class="burger-menu-middle"></div> <div class="burger-menu-middle"></div> </div> <div class="menu1"> <span><a href="#">Tour</a></span> <span><a href="#">Features</a></span> <span><a href="#">Pricing</a></span> </div> <div class="logo"><a href="#">NewProvidence</a></div> <div class="menu2"> <span><a href="#">Help</a></span> <span><a href="#">Contacts</a></span> <span><button><a href="#">Get App</a></button></span> </div> </div> <div class="top-text"> <h2>What happens tomorrow?</h2> <p>The sight of the tumblers restored Bob Sawyer to a degree of eq</p> <button>Watch video</button> </div> <div class="Iphone-6"> </div> </div> </div>

@ Vlad467 I do not know how to write more clearly. Add to it transform: translateX(-50%) - Cheslab

ishidex2 ishidex2 6.212 2 12 40 · Answer 2 · 2018-03-27T17:53:26

Because flexs should be used

 * { padding: 0; margin: 0; box-sizing: border-box; } .header-bg { background-image: url(images/bg/header.png); height: 1000px; background-repeat: no-repeat; background-size: cover; background-position: 45% 50%; border: 1px solid transparent; width: 100%; } .layout { width: 1170px; margin: 0 auto; } .burger-menu { float: left; padding: 11px 10px; } .burger-menu div { width: 20px; height: 2px; background-color: red; margin-bottom: 4px; } .top-menu { margin-top: 60px; position: relative; border: 1px solid red; } #top-menu-flex{ display: flex; justify-content: space-between; align-items: center; } .top-menu a { text-decoration: none; color: #26272d; } .top-menu span { margin-left: 40px; } .top-menu span:first-of-type { margin-left: 0; } .menu2 button { background-color: #267df4; width: 125px; height: 40px; border-radius: 18px; color: white; background-image: url(images/icons/apple-icon.png); background-repeat: no-repeat; background-position: 16px 8px; border: none; } .menu2 button a { color: white; margin-left: 5px; } .top-text { text-align: center; margin-top: 140px; } .top-text h2 { font-size: 62px; margin-bottom: 50px; } .top-text p { margin-bottom: 65px; } .top-text button { width: 205px; height: 50px; border-radius: 22px; border: 2px solid #dadcdf; background-color: transparent; } .Iphone-6 { background-image: url(images/icons/iphone-6.png); background-repeat: no-repeat; height: 450px; margin-top: 70px; margin-left: 380px; }

 <div class="header-bg"> <div class="layout"> <div class="top-menu"> <div class="burger-menu"> <div class="burger-menu-top"></div> <div class="burger-menu-middle"></div> <div class="burger-menu-middle"></div> </div> <div id="top-menu-flex"> <div class="menu1"> <span><a href="#">Tour</a></span> <span><a href="#">Features</a></span> <span><a href="#">Pricing</a></span> </div> <div class="logo"><a href="#">NewProvidence</a></div> <div class="menu2"> <span><a href="#">Help</a></span> <span><a href="#">Contacts</a></span> <span><button><a href="#">Get App</a></button></span> </div> </div> </div> <div class="top-text"> <h2>What happens tomorrow?</h2> <p>The sight of the tumblers restored Bob Sawyer to a degree of eq</p> <button>Watch video</button> </div> <div class="Iphone-6"> </div> </div> </div>

Flexs are certainly great to use, but in the code above, the logo is still not in the center.
I do not know what's in your code and it works on my example

Element positioning is incorrect

2 answers 2

More articles: