Html CSS-仅当另一个div可见时添加填充

我有以下html

.包装纸{ 背景：小麦； } .Woo商业商店通知，p.demo_商店{ 位置：绝对位置； 排名：0； 左：0； 右：0； 保证金：0； 宽度：100%； 字号：1em； 填充：1em 0； 文本对齐：居中； 背景色：a46497； 颜色：fff； z指数：99998； 盒影：0 1px1em rgba0,0,0,2； } 这是我的内容

---

演示通知单击此处

如果您无法更改html标记，您可以使用flex更改选择器的顺序，即：woocommerce商店通知，p.DEMO_商店的顺序为：0；包装材料应为订单：1；这样，您就不必依赖绝对定位来确保通知显示在页面顶部

请尝试下面的代码片段

//通过单击“取消”链接取消通知 document.querySelector'.woocommerce-store-notice\uuu dismise-link'.addEventListener'click'，函数E{ e、 防止违约； document.querySelector.woodcommerce store notice.style.display='none'； }; * { 保证金：0； } .flex{ 显示器：flex； 弯曲方向：立柱； } .包装纸{ 背景：小麦； 顺序：1； } .Woo商业商店公告， p、 示范店{ 顺序：0； 字号：1em； 填充：1em 0； 文本对齐：居中； 背景色：a46497； 颜色：fff； 长方体阴影：0 1px1em rgba0,0,0,2； } 这是我的内容

演示通知单击此处

---

您可以使用一行jQuery来解决它

在代码中，$.woocommerce-store-notice.outerHeight获取通知的高度，并将该值应用于.wrapper的边距顶部

$.wrapper.css{margin top:$.woocmerce store notice.outerHeight} .包装纸{ 背景：小麦； } .Woo商业商店通知，p.demo_商店{ 位置：绝对位置； 排名：0； 左：0； 右：0； 保证金：0； 宽度：100%； 字号：1em； 填充：1em 0； 文本对齐：居中； 背景色：a46497； 颜色：fff； z指数：99998； 盒影：0 1px1em rgba0,0,0,2； }

演示通知单击此处

这是我的内容

---

不要将通知的位置设置为绝对位置，当它出现在此处时，它不会覆盖内容。我无法更改通知的输出位置，尽管如此，我没有其他方法将其定位在页面顶部，因为我知道CSS中没有方法影响一个元素的属性，这取决于另一个元素的属性，除了父->子大小写。您可能需要js来更改css属性。