Absolute positioning head scratcher

Hi!

please see https://codepen.io/OBXJuggler/pen/YzYjrZa

how do i place the <p> into each rectangle using absolute positioning?

i tried myself, no go

i am after placing the <p> into each rectangle div… each <p> in different places… 3 different <p>, 1 per rectangle

also, kindly provide the method to absolute position text on multiple images… is there a difference?

MANY THANKS!

You would create a stacking context on the div using position:relative and then place the p element using absolute positioning within that context.

.rectangle {
  display: inline-block;
  width: 200px;
  height: 300px;
  background-color: grey;
  position: relative;
}
.rectangle p {
  position: absolute;
  margin: 0;
}
.a p {
  bottom: 0;
  left: 0;
}
.b p {
  top: 50%;
  left: 0;
}
.c p {
  top: 0;
  right: 0;
}
<div class="rectangle a">
  <p>Lorem ipsum dolor sit, </p>
</div>
<div class="rectangle b">
  <p>Lorem ipsum dolor sit amet </p>
</div>
<div class="rectangle c">
  <p>Lorem ipsum </p>
</div>

However that is only viable for limited content and not generally used to place fluid text unless you have full control of the content.

There are probably better ways to place the content using grid or flex but it does depend on your use case ?

Thanks, PualOB!

sounds smart

maybe pass on an example or 2 of grid and flexbox code in the same context?

Thanks!!!

Flex example.

.rectangle {
  display: inline-flex;
  width: 200px;
  height: 300px;
  background-color: grey;
  vertical-align: top;
}
.rectangle p {
  margin: 0;
}
.a {
  align-items: flex-end;
}
.b {
  align-items: center;
}
.c {
  justify-content: flex-end;
}
<div class="rectangle a">
  <p>Lorem ipsum dolor sit, </p>
</div>
<div class="rectangle b">
  <p>Lorem ipsum dolor sit amet </p>
</div>
<div class="rectangle c">
  <p>Lorem ipsum </p>
</div>

again, i thank you!

how do i add an image to your above code? text on an image… i tried in vs code, couldnt figure it out

also, with the above code, how can i place the tex exactly to the pixel?

text :slight_smile:

If the image can’t be a background image then either the text or the image would need to be absolutely positioned as per the other example. However there are a number of things to consider as I can’t really know the full use case that you want.

For example you can have text absolutely placed on top of the image but what happens if you have more text than the space on the image allows? What happens then?

Alternatively you may want an image to stretch and shrink with the amount of text present which is a different technique altogether.

Or you may just be placing one word.

Unless I have the full details you may get a different answer each time you ask :slight_smile:

You can also use grid to place two items in the same place without absolute positioning as you just place them in the same grid position.

You can use margins to move things around but again the question really relates to the design in hand and what effect you want to achieve. Generally in a fluid environment you don’t position text to the pixel. However if this is just a small caption overlay than you can place it there absolutely if there is no natural alignment for it.

In the end you can use a mixture of techniques but the right technique will only be known when the full extent of the job in hand is defined. Say to yourself “What if” at every stage of design.

What if the text is too big.
What is the word is too long.
What if the image is too small/big
What if the text wraps to another line
What if the user has zoomed text
What if the screen is small/large
what if …

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.