Kevin Powell - Community•6mo ago

Why is the <div> with position-absolute and start-100 positioned outside the container?

.element
{
    background-color: black;
    margin-left: 30rem;
    margin-right: 30rem;
    margin-top: 13rem;
    height: 200px;
}

.element
{
    background-color: black;
    margin-left: 30rem;
    margin-right: 30rem;
    margin-top: 13rem;
    height: 200px;
}

        <div class="element" style="position:relative;">
            <div class="" style="postion:absloute; left:100%;">
                <p class="text-danger fs-4">Text</p>
            </div>
           
        </div>

        <div class="element" style="position:relative;">
            <div class="" style="postion:absloute; left:100%;">
                <p class="text-danger fs-4">Text</p>
            </div>
           
        </div>

13 Replies

Mannix•6mo ago

what is start-100 supose to be? you are just stating where the absolutely position element should start there is nothing to prevent it from overflowing

steven preadlyOP•6mo ago

@Mannix its a bootstrap class that got translate to `left:100;"

MarkBoots•6mo ago

well, because you say it has to start 100% from the left of the container. so that is right of the container

Mannix•6mo ago

what you expected to happen ?? I'm guessing you wanted to put the text in the top right corner?

steven preadlyOP•6mo ago

so its suppose to be right:0% correct?

Mannix•6mo ago

yeah try end-0 instead of start-100 🙂 or right: 0;

steven preadlyOP•6mo ago

in most cases don't like to use the bootstrap positioning classes specially the in part of re positioning like end start ,buttom , top i have some conflicts regarding left and right, where do any of them starts when i set right:0% this means start from the left and when i use right:100% this means start from the right is that correct ?

MarkBoots•6mo ago

with left the left edge of the element will start n-amount from the left side of the container. with right the right edge of the element will start n-amount from the right side of the container

steven preadlyOP•6mo ago

the secound one will start from right and move to the right

MarkBoots•6mo ago

steven preadlyOP•6mo ago

so in case of the relative its better to us rem or px if i am using it alone

MarkBoots•6mo ago

depends on what you want, im just pointing out from where the position is calculated

steven preadlyOP•6mo ago

@MarkBoots @Mannix thank you

Gaming

Programming

Why is the <div> with position-absolute and start-100 positioned outside the container?