在Web开发中，CSS的`position`属性是一个常用的布局工具，它可以帮助开发者精确控制元素的位置。然而，在某些情况下，开发者在尝试使用以双下划线（`__position`）开头的样式时，可能会发现它不起作用，即所谓的“被屏蔽”。这背后的原因涉及到CSS的特定规则和浏览器的行为。
属性屏蔽的原理
CSS遵循特定的层叠规则，属性屏蔽就是其中之一。当两个或多个相同的选择器应用于一个元素，并定义了相同的CSS属性时，这些属性值会相互竞争。屏蔽（或称为“层叠”）发生的顺序依赖于以下三个因素：
1. 重要性：`!important`声明的权重最高。
2. 优先级：更具体的选择器将覆盖不那么具体的选择器。
3. 来源：用户定义的样式（如内联样式）可以覆盖开发者样式表中的定义。
`_position`被屏蔽的情形
在讨论`_position`被屏蔽的情况时，我们首先需要明确，标准的CSS中并没有`_position`属性。但如果我们考虑这个例子中`_position`是指带有前缀的CSS自定义属性（通常用于CSS变量），或者是尝试使用非标准的CSS属性，以下原因可能导致它被屏蔽：
1. 优先级问题
如果其他选择器具有更高的优先级，它们可能会覆盖掉尝试使用的`_position`属性。例如：
/* 低优先级 */
div {
position: relative;
}
/* 高优先级 */
div.special {
position: absolute;
}
在这个例子中，所有带有`.special`类的`div`将具有`absolute`定位，而不是`relative`。
2. 使用了`!important`
如果某个样式使用了`!important`，它将覆盖其他所有的声明，即使是具有更高优先级的选择器也不例外。
/* 即使具有更高优先级，也会被下面的规则覆盖 */
div {
position: relative;
}
/* 使用了!important的样式将屏蔽其他所有样式 */
div {
position: absolute !important;
}
3. 自定义属性（CSS变量）的使用
如果`_position`是一个自定义属性（CSS变量），它需要被正确地使用和覆盖：
/* 假设 _position 是一个自定义属性 */
div {
--_position: relative; /* 定义变量 */
position: var(--_position); /* 使用变量 */
}
/* 如果我们忘记覆盖变量或者在其他地方没有定义，那么它可能不会被应用 */
4. 浏览器的兼容性和渲染引擎行为
某些CSS属性前缀（如`_`）在某些浏览器或特定的渲染引擎中可能是非标准的扩展。这些扩展可能不会在所有的浏览器中得到支持，或者可能在新的浏览器版本中被移除，导致`_position`这样的属性被屏蔽。
结论
在处理CSS属性屏蔽时，理解CSS的层叠规则至关重要。当遇到类似`_position`这样属性被屏蔽的情况，应该检查以下内容：
- 检查CSS选择器的优先级，并确保使用了正确和足够具体的选择器。
- 确认没有其他声明使用了`!important`，从而无意中屏蔽了你的样式。
- 如果是在使用CSS自定义属性，检查变量是否正确定义和引用。
- 验证CSS属性是否是有效的标准属性，或者它是否依赖于特定浏览器的非标准扩展。
通过这些步骤，你可以确保你的CSS样式得到正确应用，从而更好地控制页面元素的位置和布局。