“职位：绝对”的祖父母、父母和子女管理问题答案

【问题标题】：Grandparent, parent and child management issues with 'position: absolute'“职位：绝对”的祖父母、父母和子女管理问题
【发布时间】：2019-06-12 09:18:56
【问题描述】：

因此，在 React 中，我的代码始终位于根 div（祖父母）内。

在我的 Project.js 组件中，我有另一个 div(parent)，它只保留背景颜色。

并且该组件显示在 App.js 中，没有额外的 div

父元素内的所有元素都有位置：绝对（除了需要固定的第一个图像）。

绝对位置的元素似乎正在脱离父 div。

底部是当前状态的缩小图。图像中的沙区是具有该背景颜色的 div。

我尝试将祖父母和父母设置为位置：相对不起作用。尝试将父级设置为溢出：隐藏希望它会扩展？这不起作用

App.js：（忽略主组件）

import Home from './components/Home'
import Project from './components/Projects';
function App() {
    return(
        <>
            <Home />
            <Project />
        </>
    )
}

项目组件：（孩子在我的css文件中设置为绝对位置）

class Project extends React.Component {
    constructor() {
        super()
        this.state = {}
    }
    render() {
        return(
            <div >
                <img src={ocean} alt="" />
                <h1 className={a}> Projects</h1>
                <h2 className={b}> Desktop, Tablet and Mobile Responsive</h2>
                <img src={pframe} alt="" className={c}/>
                <img src={um} alt="" className={d}/>
            </div>
        )
    }
}

CSS：

.a{     
    position: absolute;
    width: 278px;
    height: 83px;
    left: 184px;
    top: 1330px;
    font-family: Viga;
    font-style: normal;
    font-weight: normal;
    font-size: 72px;
    line-height: 97px;
    color: rgba(87, 6, 38, 0.98);
    text-shadow: 0px 4px 4px #FFD482;
}

.b{
    position: absolute;
    width: 617px;
    height: 33px;
    left: 178px;
    top: 1425px;
    font-family: Viga;
    font-style: normal;
    font-weight: normal;
    font-size: 34px;
    line-height: 46px;
    color: #F54900;
    text-shadow: 2px 4px 0px #F7E5B6;
}

.c{
    position: absolute;
    width: 758px;
    height: 644.52px;
    left: 77px;
    top: 1586px;
}

.d{
    position: absolute;
    width: 782.67px;
    height: 832.35px;
    left: 700px;
    top: 1232.65px;
}

我希望父级与子级内容一起扩展。而孩子们的定位是absolute，因为我会更新内容。

所以为父级设置高度似乎不是正确的做法。

【问题讨论】：

能否请您提供生成的 html 和您的 css/scss？
刚刚用css更新了，其余的我已经包含了
抱歉，react 模板不是生成的 html。如果您可以使用图像设置小提琴，则更容易发现问题。什么是“父子内容”？

标签： html css reactjs

【解决方案1】：

现在我明白你的意思了。要使父 div 与其子内容一起增长，您可以将子元素定位为“相对”而不是绝对。

然后将父 div 设置为 style="overflow: overlay;"

你可以试试“overlay”而不是overflow:auto

【讨论】：

好吧，这似乎适用于我的 svgs，所有内容现在都在 div 内，这非常棒，但一个问题是它为该 div 创建了另外两个 schrollbars，所以现在我总共有 3 个 schrollbars
请尝试 style="overflow: overlay;"
很好，摆脱了 schrollbars，但我认为相对位置摆脱了我的图片重叠，我希望它们重叠。就像我提供的最后一张图片一样。你知道我如何在没有 position: absolute 的情况下实现这一点吗？
其实我没听懂你的问题，但也许：随意将特定图像放到 position=absolute 上。
感谢马特的帮助！随处可见的变化，我终于把它们放在一起

【解决方案2】：

在你的亲戚div中使用overflow: initial

【讨论】：