使用CSS固定DIV内的跨度位置，而与屏幕大小无关

基础概念

CSS（层叠样式表）是一种用于描述HTML文档样式的语言。通过CSS，可以控制页面元素的布局、颜色、字体等视觉效果。div 是HTML中的一个块级元素，常用于布局和分组内容。span 是一个内联元素，通常用于对文本进行样式化。

类型

绝对定位：通过 position: absolute; 和 top、bottom、left、right 属性来固定元素的位置。
固定定位：通过 position: fixed; 和 top、bottom、left、right 属性来固定元素相对于视口的位置。

应用场景

导航栏：固定在页面顶部或底部的导航栏。
侧边栏：固定在页面一侧的侧边栏。
提示框：固定在屏幕中央的提示框。

问题及解决方法

问题描述

使用CSS固定 div 内的 span 位置，而与屏幕大小无关。

原因

span 是内联元素，默认情况下不会占据固定的空间，且其位置受父元素的影响。

解决方法

将 span 转换为块级元素：
将 span 转换为块级元素：
使用绝对定位：
使用绝对定位：
使用固定定位（如果需要相对于视口固定）：
使用固定定位（如果需要相对于视口固定）：

示例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Fixed Span Example</title>
    <style>
        .container {
            position: relative;
            width: 100%;
            height: 200px;
            border: 1px solid black;
        }
        .fixed-span {
            position: absolute;
            top: 10px;
            left: 10px;
            background-color: yellow;
        }
    </style>
</head>
<body>
    <div class="container">
        <span class="fixed-span">Fixed Span</span>
        This is some content inside the container.
    </div>
</body>
</html>