CODEWITHSUNDEEP
htmlcss
Nick Parsons
Nick Parsons

Reputation: 50664

Move element out of div using css

Effectively, I'm trying to move/position the inner paragraph element (p) from within the .box div (blue box) to be positioned above the .box div (blue box) in the fiddle below:

html, body {
  margin: 0;
}

.box {
  height: 200px;
  width: 400px;
  background: aqua;
  color: black;
}
<div class="container">
  <h4>Box heading</h4>
  <div class="box">
    <div class="contents">
      <p>This is some awesome text, which is inside the box</p>
      <p>This is also another great paragraph that is better than any book ever written</p>
    </div>
  </div>
</div>

My expected output is:

html,
body {
  margin: 0;
}

.box {
  height: 200px;
  width: 400px;
  background: aqua;
  color: black;
}

.contents {
  position: relative;
  top: -50px;
}
<div class="container">
  <h4>Box heading</h4>
  <p>This is some awesome text, which is inside the box</p>
  <p>This is also another great paragraph that is better than any book ever written</p>
  <div class="box">
    <div class="contents"></div>
  </div>
</div>

However, in the above snippet, I have physically placed the paragraph elements above the blue box (.box div). Is there a way to essentially move the paragraph element from within the blue box above it using css.

I've tried using position attribute or giving the .contents a negative margin, however, this doesn't add space for the text to go above and causes overlapping issue with the heading and/or the blue box.

Note: The paragraphs within the box can be of any length, so I don't know the height and thus the offset needed for the paragraph.

Upvotes: 0

Views: 3230

Answers (2)

itodd
itodd

Reputation: 2373

You could remove the styles from .box on mobile and add them to .content::after. This will allow for any amount of content in the paragraphs and grow accordingly.

html, body {
  margin: 0;
}

.box,
.contents::after {
  height: 200px;
  width: 400px;
  background: aqua;
  color: black;
}


/* Mobile only styles */
.box {
  height: auto;
  width: auto;
  background: none;
}

.contents::after {     
  content: ''; 
  display: block;
}
<div class="container">
  <h4>Box heading</h4>
  <div class="box">
    <div class="contents">
      <p>This is some awesome text, which is inside the box</p>
      <p>This is also another great paragraph that is better than any book ever written</p>
    </div>
  </div>
</div>

Upvotes: 1

Temani Afif
Temani Afif

Reputation: 272598

You can consider position:relative for the content element and its container and use the same amount of pixel:

body {
  margin: 0;
}

.box {
  height: 200px;
  width: 400px;
  background: aqua;
  color: black;
  position: relative;
  top: 110px;
}

.contents {
  position: relative;
  top: -110px;
}
<div class="container">
  <h4>Box heading</h4>
  <div class="box">
    <div class="contents">
      <p>This is some awesome text, which is inside the box</p>
      <p>This is also another great paragraph that is better than any book ever written</p>
    </div>
  </div>
</div>

Or consider translate for a more dynamic way:

body {
  margin: 0;
}

.box {
  height: 200px;
  width: 400px;
  background: aqua;
  color: black;
  transform:translateY(40%); /*use 100% if height auto*/
}

.contents {
  transform:translateY(-100%);
}
<div class="container">
  <h4>Box heading</h4>
  <div class="box">
    <div class="contents">
      <p>This is some awesome text, which is inside the box</p>
      <p>This is also another great paragraph that is better than any book ever written</p>
    </div>
  </div>
</div>

Upvotes: 3

Related Questions