position_relative+absolute 搭配使用,实现绝对定位 放大缩小都不影响其绝对位置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div style="position: relative; 500px; height:200px; border: 1px red solid;margin: 0 auto; ">
        <div style="position: absolute; 50px; height:50px; background-color:#411000; top: 0;left:0;"></div>
    </div>

    <div style="position: relative; 500px; height:200px; border: 1px red solid;margin: 0 auto; ">
        <div style="position: absolute; 50px; height:50px; background-color:#411000; bottom: 0;left:0;"></div>
    </div>

    <div style="position: relative; 500px; height:200px; border: 1px red solid;margin: 0 auto; ">
        <div style="position: absolute; 50px; height:50px; background-color:#411000; bottom: 0;right:0;"></div>
    </div>
</body>
</html>

<!--
relative+absolute 搭配使用,实现绝对定位  放大缩小都不影响其绝对位置
-->

效果:

position_relative+absolute 搭配使用,实现绝对定位  放大缩小都不影响其绝对位置