<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
box-sizing: border-box;
}
body {
background-color: rgb(238, 238, 238);
}
.container {
width: 200px;
height: 1000px;
background-color: red;
padding: 10px;
overflow: hidden;
}
.banner {
padding: 10px;
background-color: #46c557;
text-align: center;
/* 在不动其他元素的样式的情况下，这么改动最快 */
margin: 0 -10px;
}
/* 模拟有很多节点类名不统一，这里示例一下 */
div[class*="content-item"] {
display: flex;
justify-content: center;
align-items: center;
height: 300px;
background-color: #fff;
}
</style>
</head>
<body>
<div class="container">
<div class="banner">我是banner, 我的margin为负值，我可以覆盖父级的padding</div>
<div class="content-item1">我是content, 我的兄弟节点有很多</div>
<div class="content-item2">我是content, 我的兄弟节点有很多</div>
<div class="content-item3">我是content, 我的兄弟节点有很多</div>
<div class="content-item4">我是content, 我的兄弟节点有很多</div>
</div>
</body>
</html>uni-app中<scroll-view/>中的组件margin设置为负值的情况无法覆盖父级的padding，将父级组件 <scroll-view/> 改为 <view />可以生效。
请问怎么解决，或者说怎么处理这种情况？使用cover-view组件吗？
1 个回复
爱豆豆 - 办法总比困难多
肯定盖不住啊 如果能盖住scroll-view的padding那子元素不就比scroll-view的层级还高了 你要的效果还是一样实现不了
不清楚你要的效果 但是你可以用view定位到scroll-view内然后固定在头部通过z-index改变与子元素的覆盖效果
或者你把你要的需求描述清楚点