css不占位置看不到

CSS（Cascading Style Sheets）是一种用于描述网页样式的语言，通过CSS可以控制文本、颜色、布局和其它外观和感觉方面的元素。在网页设计中，CSS扮演着极为重要的角色，它可以让网页变得更加美观和易于阅读和导航。但是，有一个与CSS相关的特性可能会让一些初学者感到困惑，那就是CSS不占位置看不到。

div {
    width: 100px;
    height: 100px;
    background-color: red;
    position: absolute;
    top: 100px;
    left: 100px;
} 

上面这段CSS代码展示了一个红色的正方形被放置在页面的左上角，使用了position:absolute属性，top和left属性将其定位。请注意，这个正方形并不会占用页面上的位置，并且即使屏幕大小发生变化，它也将始终停留在页面的左上角。这可能会让一些人感到迷惑，因为他们认为一个元素必须具有宽度、高度和位置，才能在页面上被看到。

实际上，CSS不占位置看不到是正常的现象，因为这是CSS定位属性的工作原理决定的。当我们使用position:relative或position:absolute属性时，元素的定位会发生改变，但元素本身不会影响后面的元素。这意味着，即使你放置一个元素在网页的左下角或页面最后一个元素之后，它仍然不会影响页面布局。由于这个特性可以让我们更好地控制页面布局，所以它被广泛地应用在现代网页设计中。

在总结一下，CSS不占位置看不到是一种普遍的现象，它是由于CSS定位属性的工作原理决定的。因此，如果你使用position:relative或position:absolute属性，就应该知道，你所创建的元素并不会占用页面的位置，即使它们看起来是从页面中“消失”了，它们仍然可以在页面上起到作用。