Question 178373 in CSS Question posted in
Some basic documentation can be found here.

Why does my absolute-positioned element affect page size?

I’m trying to create an designed element which I want to float on the edge of my right corner of the screen,

and I want only to show half of it,
while the other half I’m trying to place outside of the screen.

I’m trying to do that with position absolute, but from some reason it enlarges my screen instead of just placing the element outside the edges.

what is it that I’m missing?

<div class="app-wrapper" style="position: relative;">
    <div class="half-hidden-element" style="
        position: absolute;
        width: 41.875vw;
        height: 41.875vw;
        left: 100%;
        background-color: black">
    </div>
 </div>
Tags:

2

Answers


  1. 0

    It does not affect the page size you overflow the width of the div containing the element

    you will have to manage it by using overflow css property

    .app-wrapper {
  border: solid red;
  height: 25px;
}

body {
  overflow: hidden;
}
    <div class="app-wrapper" style="position: relative;">
    <div class="half-hidden-element" style="
        position: absolute;
        width: 41.875vw;
        height: 41.875vw;
        left: 100%;
        background-color: black">
    </div>
 </div>
    Login or Signup to reply.
  2. 0 
    <div class="app-wrapper" style="position: absolute;">
<div class="half-hidden-element" style="
    position: fixed;    width: 41.875vw;    
    height: 41.875vw;    
    left: 75%; 
    background-color: black">
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search