12-定位相关

元素定位到父级右上角

html
<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .container {
            position: relative; /* 确保容器是相对定位 */
            width: 300px;        /* 设置宽度，仅作示例 */
            height: 200px;       /* 设置高度，仅作示例 */
            background-color: #f0f0f0; /* 背景颜色，仅作示例 */
            padding: 10px;       /* 内边距，仅作示例 */
        }

        .corner-text {
            cursor: pointer;
            position: absolute;  /* 绝对定位，相对于最近的已定位祖先元素 */
            top: 0;              /* 顶部距离为0 */
            right: 0;            /* 右侧距离为0 */
            background-color: #333; /* 背景色，可以根据需要调整 */
            color: white;        /* 文字颜色，可以根据需要调整 */
            padding: 5px 10px;   /* 内边距，使文字与边框有间隔 */
            border-bottom-left-radius: 5px; /* 圆角，可根据需要调整 */
        }
    </style>
</head>
<body>
<div class="container">
    <span class="corner-text">Right Top</span>
    <!-- 其他内容 -->
</div>
</body>
</html>
12-定位相关 ​

元素定位到父级右上角 ​

12-定位相关

元素定位到父级右上角
