Absolute Position Is Not Working

Absolute position is not working

Elements with absolute positioning are positioned from their offsetParent, the nearest ancestor that is also positioned. In your code, none of the ancestors are "positioned" elements, so the div is offset from body element, which is the offsetParent.

The solution is to apply position:relative to the parent div, which forces it to become a positioned element and the child's offsetParent.

<html>
    <body>
        <div style="padding-left: 50px;">
            <div style="height: 100px">
                Some contents
            <div>

            <div style="height: 80px; padding-left: 20px; position: relative;">
                <div id="absPos" style="padding: 10px; position: absolute; left: 0px; top: 0px; background-color: red;"></div>
                Some text
            </div>
        </div>
    </body>
</html>

right not working but left is at position: absolute;

add position:relative; to .act class and it should work

the position:absolute; on the img element looks for a container to position itself against, this container has to have x, y, height and width values inside the DOM. giving the parent element (in this case .act) position:relative; ensures the element has a x, y, width and a height onto with the img elements can be placed

Position absolute not working correctly when wrapped by an Angular component

The problem is that you only specified position: absolute – and no values for any of the corners.

If you leave top, bottom, left and right all at their default value auto, then the element gets absolutely positioned, at the position it would already have in normal flow. And since an ancestor has 20px padding here, that normal flow position is 20px from the top left corner of the ancestor in both directions.

So specify top: 0; left: 0; as well for the absolutely positioned element - and it will be where you want it to be, in the top left corner.

Material UI Button Hover Not Working Absolute Position

There are two solutions:

use zIndex on the button that is greater than the blurred inner div
Move the button under your blurred inner div

I would prefer the 2nd approach as you don't need to know the zIndex of other elements

const useStyles = makeStyles((theme) => ({
  blur: {
    filter: "blur(7px)"
  },
  relativePos: {
    position: "relative"
  },
  absolutePos: {
    position: "absolute",
    top: "50%",
    left: "50%"
    // zIndex: 1000  <- Add The zIndex here if you want 1st approach
  },
  floatingBtn: {
    "&:hover": {
      cursor: "pointer",
      backgroundColor: "red"
    }
  },
  // This is temp button to just toggle the absolute button
  tempButton: { margin: "30px 0" }
}));

export default function App() {
  const classes = useStyles();
  const [showButton, setShowButton] = useState(false);

  return (
    <div className={classes.relativePos}>

      {/* Your graphs area */}
      <div className={classes.blur}>This is graphs area</div>

      {/* Your absolute button with hover effect */}
      {/* you can add it at the bottom and then no need to use zIndex */}
      {showButton && (
        <button className={`${classes.absolutePos} ${classes.floatingBtn}`}>
          Button
        </button>
      )}

      {/* Temp button to show/hide the absolute button, you should have ur own logic */}
      <button
        className={classes.tempButton}
        onClick={() => setShowButton(!showButton)}
      >
        Click me to show/Hide the button
      </button>
    </div>
  );
}

working example: codesandbox

BTW If you remove filter: "blur(7px)" from the blur class then the hover should work without changing anything in your code. I have no idea why (-_-)

Absolute Position Is Not Working