CODEWITHSUNDEEP
htmlcss
user13585926
user13585926

Reputation:

How can I prevent my text from being pushed up when I add more content?

I have an image, and a text-group that holds text.

<div class="container">

  <img src="https://images.unsplash.com/photo-1603221580671-2d3aa6824923?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80">

  <div class="text-group">
    <h1>Moon</h1>          
    <h1>Star</h1>
  </div>

</div>

I want the first word to always be positioned half on the image and half off the image like this.

enter image description here

The Problem: When I add more text into the text-group, it pushes the first word up.

enter image description here

Without adding a height to my text-group and without changing the bottom position of my text-group, how can I prevent my text from being pushed up when more text is added? In other words, how can I achieve the result below?

enter image description here

Full HTML and CSS

* {
  margin: 0;
  padding: 0;
}

.container {
  position: relative;
}

img {
  width: 100%;
  height: 300px;
  object-fit: cover;
}

.text-group {
  position: absolute;
  bottom: -15%;
}

h1 {
  color: green;  
  font-size: 5rem;
}
<div class="container">

  <img src="https://images.unsplash.com/photo-1603221580671-2d3aa6824923?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80">

  <div class="text-group">
    <h1>Moon</h1>          
    <h1>Star</h1>
  </div>

</div>

Upvotes: 0

Views: 388

Answers (4)

coderboy
coderboy

Reputation: 769

This is an easy fix

Just change the text-group class to this, changing the position to absolute, this makes the element positioned absolutely to its first positioned parent.

.text-group {
  position: absolute;
  top: 80%;
}

You can learn more about css positioning here, as it as been explained in full details https://medium.com/@leannezhang/difference-between-css-position-absolute-versus-relative-35f064384c6

Upvotes: 0

MaxiGui
MaxiGui

Reputation: 6358

You have to position your position:absolute; from the top instead of the bottom. Because it will fix it from the top:

.text-group {
  position: absolute;
  top: 81%;
}

DEMO

* {
  margin: 0;
  padding: 0;
}

.container {
  position: relative;
}

img {
  width: 100%;
  height: 300px;
  object-fit: cover;
}

.text-group {
  position: absolute;
  top: 81%;
}

h1 {
  color: green;  
  font-size: 5rem;
}
<div class="container">

  <img src="https://images.unsplash.com/photo-1603221580671-2d3aa6824923?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80">

  <div class="text-group">
    <h1>Moon</h1>          
    <h1>Star</h1>
  </div>

</div>

Upvotes: 1

G-Cyrillus
G-Cyrillus

Reputation: 106068

you might not need position. A negative top margin on the first h1 is plenty enough, no need then to mind img's height.

* {
  margin: 0;
  padding: 0;
}

.container {
  /*  position: relative; */  /*optionnal i believe */
}

img {
  width: 100%;
  height: 300px;
  object-fit: cover;
}

.text-group {
  /* position:absolute */  /*optionnal i believe */
}

.text-group h1:first-child {
  margin-top: -0.7em;
}

h1 {
  color: green;
  font-size: 5rem;
}
<div class="container">

  <img src="https://images.unsplash.com/photo-1603221580671-2d3aa6824923?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80">

  <div class="text-group">
    <h1>Moon</h1>
    <h1>Star</h1>
  </div>

</div>

works the same with position:

* {
  margin: 0;
  padding: 0;
}

.container {
  position: relative;
}

img {
  width: 100%;
  height: 300px;
  object-fit: cover;
}

.text-group {
  position: absolute
}

.text-group h1:first-child {
  margin-top: -0.7em;
}

h1 {
  color: green;
  font-size: 5rem;
}
<div class="container">

  <img src="https://images.unsplash.com/photo-1603221580671-2d3aa6824923?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=334&q=80">

  <div class="text-group">
    <h1>Moon</h1>
    <h1>Star</h1>
  </div>

</div>

Upvotes: 1

Noiseymur
Noiseymur

Reputation: 61

Use:

top: 85%;

instead of:

bottom: 15%;

Upvotes: 0

Related Questions