Create a div that has no effect on positioning of the other elements on the page

user_16315718 0
Viewed 120

I made this background for a web page and now i need to put Some text and images into the part. But if i put anything, except tag, the ::after element go each time lower until it disappears under the page. So, it's possible to make a div that don't movve other elements in the page?

.page_part{ /* qui */
    background-color: #0a0a0a;
    width: 100%;
    height: 100vh;
    
}
.page_part::before {
    content: '';
    position: absolute;
    z-index: 0;
    right: 0px;
    margin-bottom: 50%;
    justify-content: center; 
    width:50%;
    height: 90vh;
    background-image: linear-gradient(to top right,#FFBB86FC,#FFBB86FC, #FF3700B3);
    clip-path: circle(30% at right 50%);
}
.page_part::after {
    content: '';
    position: absolute;
    z-index: 0;
    left:0px;
    margin-top: 10%;
    width:25%;
    height: 80vh;
    background-image: linear-gradient(to top right,#ff86fffc,#fdff86fc);
    clip-path: circle(30% at left 50%);
}
.page_part h2{ /* setto gli h2 */
    background-color: #111111;
    box-shadow: 2.8px 2.8px #1d1d1d;
    color: #E0E0E0;
    text-align: center;
    overflow-y: hidden;
    width: auto;
    font-weight: bold;
    font-size: 3.4vh;
    padding: 8px 24px;
}

    <div class="page_part">
        <h2>this is the page part</h2>
        <div></div>
    </div>

Is possible to create a div that doesn't change the positioning of the "before" element that i've created with css only?

html

    <div class="page_part">
        <h2>4</h2>
        <div></div>
    </div>

css

.page_part:nth-child(5){ /* qui */
    background-color: #0a0a0a;
    width: 100%;
    height: 100vh;
    
}
.page_part:nth-child(5)::before {
    content: '';
    position: absolute;
    z-index: 0;
    right: 0px;
    margin-bottom: 50%;
    justify-content: center; 
    width:50%;
    height: 90vh;
    background-image: linear-gradient(to top right,#FFBB86FC,#FFBB86FC, #FF3700B3);
    clip-path: circle(30% at right 50%);
}
.page_part:nth-child(5)::after {
    content: '';
    position: absolute;
    z-index: 0;
    left:0px;
    margin-top: 10%;
    width:25%;
    height: 80vh;
    background-image: linear-gradient(to top right,#ff86fffc,#fdff86fc);
    clip-path: circle(30% at left 50%);
}
.page_part:nth-child(5) h2{ /* setto gli h2 */
    background-color: #111111;
    box-shadow: 2.8px 2.8px #1d1d1d;
    color: #E0E0E0;
    text-align: center;
    overflow-y: hidden;
    width: auto;
    font-weight: bold;
    font-size: 3.4vh;
    padding: 8px 24px;
}```
css html
2 Answers

Just add

position: absolute;

along with other style attributes in page_part h2

.page_part h2{
    background-color: #111111;
    box-shadow: 2.8px 2.8px #1d1d1d;
    color: #E0E0E0;
    text-align: center;
    overflow-y: hidden;
    width: auto;
    font-weight: bold;
    font-size: 3.4vh;
    padding: 8px 24px;
    position: absolute;
}

Background (defined in ::before and ::after) will stop changing position.

user_23849600

The position of your before pseudo element seems not to move (as it's pseudo content that comes before the div itself that is to be expected).

It's the after pseudo element that moves if you add text to the div. This is because no top positioning has been set for the after, so it just takes wherever the div has got to as its top. Setting a top (this snippet guesses at 70%) and ensuring the div itself has a position setting (so the round decorations can position themselves relative to that, just in case body changes position/size);

.page_part {
  /* qui */
  background-color: #0a0a0a;
  width: 100%;
  height: 100vh;
  position: absolute;
}

.page_part::before {
  content: '';
  position: absolute;
  z-index: 0;
  right: 0px;
  margin-bottom: 50%;
  justify-content: center;
  width: 50%;
  height: 90vh;
  background-image: linear-gradient(to top right, #FFBB86FC, #FFBB86FC, #FF3700B3);
  clip-path: circle(30% at right 50%);
}

.page_part::after {
  content: '';
  position: absolute;
  z-index: 0;
  left: 0px;
  margin-top: 10%;
  top: 70;
  width: 25%;
  height: 80vh;
  background-image: linear-gradient(to top right, #ff86fffc, #fdff86fc);
  clip-path: circle(30% at left 50%);
}

.page_part h2 {
  /* setto gli h2 */
  background-color: #111111;
  box-shadow: 2.8px 2.8px #1d1d1d;
  color: #E0E0E0;
  text-align: center;
  overflow-y: hidden;
  width: auto;
  font-weight: bold;
  font-size: 3.4vh;
  padding: 8px 24px;
}
<div class="page_part">
  <h2>this is the page part</h2>
  <div></div>
</div>

user_108674540
Related