Tekst chowa się pod obrazkiem

Question

 

Cześć, jak na obrazku widać. Tekst chowa mi się pod obrazkiem. Zamysł był taki aby wyrównać obrazek względem body, a nie article gdzie znajdują się bloki tekstu, gdyż jest mały, a obrazki potrafią być szerokie.

Tak przedstawia się mój css.

body {
  margin: 0 auto;
  font-family: OpenSans;
  line-height: 1.6em;
  background: #fff;
}


article {
  color: #50585c;
  background: #fff;
  font-size: 24px;
  hyphens: auto;
  min-height: 50vh;
  font-family: NotoSerif;
  text-align: justify;
  position: relative;
}


#center {
  width: 700px;
  margin-left: auto;
  margin-right: auto;
  padding: 15px;
}

.imgpost{
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
}

Jak dam article ustawienie postion relative to nic się nie zmienia. :P

Comments

body {
  margin: 0 auto; // ????????????
  font-family: OpenSans;
  line-height: 1.6em;
  background: #fff;
}
.imgpost{
  position: absolute; 
  margin-left: auto;  //??????????????
  margin-right: auto; //??????????????
  left: 0; //??????????????
  right: 0; //??????????????
}

to jest nielogiczne.

Daj jeszcze html bo u mnie to wygląda inaczej.

Answer 1

Witaj. 

Poczytaj o właściwości z-index

Comments

Cześć, próbuję ale uzyskuję efekt odwrotny. :D Tekst jest nad obrazkiem i śmiesznie to wygląda. :P Chciałbym aby pojawił się efekt "margin" i tekst był pod nim.

---

Jeśli możesz to pokaż jeszcze strukturę html.

---

Przepraszam, że wygląda to jak wygląda, ale generuję to w PHP i przekopiowałem z przeglądarki.

<div id="center">
                  <h2 class="center">dasd</h2><p class="date">22/09/2018</p><img class="imgpost" src="img/Screenshot from 2018-09-17 19-53-33.png"><br><br>r<br><h2 class="center">ddd</h2><p class="date">22/09/2018</p><img class="imgpost" src="img/Screenshot from 2018-09-17 19-53-33.png"><br><br>d<br><h2 class="center">Null.</h2><p class="date">21/09/2018</p><img class="imgpost" src="img/Screenshot from 2018-09-17 19-53-33.png"><br><br>Just a null.<br><h2 class="center">Lorem ipsum1</h2><p class="date">16/09/2018</p><img class="imgpost" src="img/proxy.duckduckgo.com(1).jpg"><br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc id dolor faucibus, tempor dui eu, gravida libero. In varius iaculis tempor. Etiam tristique vel elit auctor pharetra. Quisque in urna dolor. Phasellus pretium iaculis semper. Integer in nibh accumsan, laoreet massa sit amet, bibendum urna. Phasellus interdum nibh at nulla placerat, at ullamcorper arcu porta.

Maecenas a consectetur quam. Phasellus eget ullamcorper ex. Mauris vestibulum lobortis odio, a bibendum justo interdum eu. Cras est ipsum, convallis non lectus ac, accumsan varius sapien. Duis ullamcorper, est nec facilisis fermentum, orci ex malesuada eros, nec finibus purus mi eget nisl. Praesent lobortis eleifend metus ac blandit. Praesent elit elit, finibus sit amet semper at, dictum in ligula.

Curabitur nunc urna, convallis ut vulputate a, blandit a neque. Duis scelerisque nibh eget egestas varius. Maecenas eget nibh a augue convallis facilisis. Donec in faucibus nisl. Sed in lectus nisi. Aliquam aliquam velit in diam varius porta. Donec et aliquet ipsum.

Curabitur ex nibh, dictum quis hendrerit a, aliquam id ligula. Aenean auctor ligula quam. Vestibulum ultricies, lectus sed dapibus suscipit, magna tellus luctus augue, eget placerat ex nibh id sem. Suspendisse blandit vitae ligula vel ullamcorper. Pellentesque a vulputate purus. Sed eleifend nunc id bibendum vehicula. Quisque bibendum ullamcorper eros, ac mollis ex malesuada at. Aenean dignissim at ligula imperdiet aliquam. Fusce vulputate leo sapien, eget ultricies sapien commodo quis. Pellentesque lacinia odio ac lacus vestibulum suscipit. Integer ut ornare velit. Vivamus dictum volutpat eros, in rhoncus ipsum consectetur et. Maecenas varius interdum urna, et lacinia lectus interdum id. Integer tempor dui non dictum porttitor.

Nunc mattis, augue nec mollis laoreet, lectus massa tempor tellus, nec iaculis elit dui eu nisi. Maecenas quis neque nec sapien mattis malesuada. Maecenas quis sem lorem. Pellentesque sodales tellus eros, rutrum vehicula ligula lobortis in. Suspendisse a nisi at libero porta convallis ut sed arcu. Praesent scelerisque egestas tortor sed pellentesque. Integer ut fermentum lacus, eu ornare nulla. Maecenas molestie, eros sit amet accumsan lobortis, dolor nulla euismod lacus, vitae viverra justo erat eget diam. Etiam in quam sapien. In posuere mi in efficitur suscipit. Etiam vel congue justo. Nulla rutrum cursus nisl eu gravida. <br><h2 class="center">Lorem ipsum1</h2><p class="date">16/09/2018</p><img class="imgpost" src="img/d.png"><br><br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc id dolor faucibus, tempor dui eu, gravida libero. In varius iaculis tempor. Etiam tristique vel elit auctor pharetra. Quisque in urna dolor. Phasellus pretium iaculis semper. Integer in nibh accumsan, laoreet massa sit amet, bibendum urna. Phasellus interdum nibh at nulla placerat, at ullamcorper arcu porta.

Maecenas a consectetur quam. Phasellus eget ullamcorper ex. Mauris vestibulum lobortis odio, a bibendum justo interdum eu. Cras est ipsum, convallis non lectus ac, accumsan varius sapien. Duis ullamcorper, est nec facilisis fermentum, orci ex malesuada eros, nec finibus purus mi eget nisl. Praesent lobortis eleifend metus ac blandit. Praesent elit elit, finibus sit amet semper at, dictum in ligula.

Curabitur nunc urna, convallis ut vulputate a, blandit a neque. Duis scelerisque nibh eget egestas varius. Maecenas eget nibh a augue convallis facilisis. Donec in faucibus nisl. Sed in lectus nisi. Aliquam aliquam velit in diam varius porta. Donec et aliquet ipsum.

Curabitur ex nibh, dictum quis hendrerit a, aliquam id ligula. Aenean auctor ligula quam. Vestibulum ultricies, lectus sed dapibus suscipit, magna tellus luctus augue, eget placerat ex nibh id sem. Suspendisse blandit vitae ligula vel ullamcorper. Pellentesque a vulputate purus. Sed eleifend nunc id bibendum vehicula. Quisque bibendum ullamcorper eros, ac mollis ex malesuada at. Aenean dignissim at ligula imperdiet aliquam. Fusce vulputate leo sapien, eget ultricies sapien commodo quis. Pellentesque lacinia odio ac lacus vestibulum suscipit. Integer ut ornare velit. Vivamus dictum volutpat eros, in rhoncus ipsum consectetur et. Maecenas varius interdum urna, et lacinia lectus interdum id. Integer tempor dui non dictum porttitor.

Nunc mattis, augue nec mollis laoreet, lectus massa tempor tellus, nec iaculis elit dui eu nisi. Maecenas quis neque nec sapien mattis malesuada. Maecenas quis sem lorem. Pellentesque sodales tellus eros, rutrum vehicula ligula lobortis in. Suspendisse a nisi at libero porta convallis ut sed arcu. Praesent scelerisque egestas tortor sed pellentesque. Integer ut fermentum lacus, eu ornare nulla. Maecenas molestie, eros sit amet accumsan lobortis, dolor nulla euismod lacus, vitae viverra justo erat eget diam. Etiam in quam sapien. In posuere mi in efficitur suscipit. Etiam vel congue justo. Nulla rutrum cursus nisl eu gravida. <br>                </div>

 

Answer 2

Nadaj dla obrazka display: block;

Mam nadzieję, że o to Ci chodziło ;)

Comments

Niestety efekt jest taki sam ciągle. :P

Answer 3

Jeżeli ustawiasz element position: absolute; to musisz mieć świadomość, że wyjmujesz go z obiegu dokumentu. Czyli miejsce, które zajmowałby element static zostaje usunięte, i jego pozycje zajmują inne elementy.

.imgpost{
  position: absolute;
...
}