Absolutely positioned element does not move to the rigt-CodePudding

I have an element set to position: absolute; and has its right property set to right: 0 but it does not move to the right, it remains on the left side of the screen. How can I fix this ?

I'm using Tailwind CSS

CodePudding user response：

its because you will find that the parent element has postion: relative; that mean you tell css to make the parent is the relative postion for your element not the body of the webpage

<!DOCTYPE html>
<html>
<head>
<style>
div.relative {
  position: relative;
  left: 30px;
  border: 3px solid #73AD21;
}
.test{
    position: absolute;
    top:0;
}
</style>
</head>
<body>

<h2>position: relative;</h2>

<p>An element with position: relative; is positioned relative to its normal position:</p>

<div >
  <div class= "test">This div element has position: relative;
 </div>
 
</div>
<div class= "test">This div element has position: relative;
 </div>
</body>
</html>

if you run this code we have to div element one inside div element that have class called relative and another have not parent if you use position absoulte for both of them you will find differnet thing the div inside div element will move not move but the second div will go to the top of the page that because relative position effect

CodePudding user response：

add !important to the CSS selector to override the configuration of tailwind.

eg like this

    .box-1 {
        background: green;
        position: absolute;
        right: 0 !important;
    }