Question

因此，在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位置时，我将更新内容。

因此，为父母设置身高似乎不是正确的选择。

Answer 1

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

然后将父div设置为style =“ overflow：overlay;”

代替溢出：自动，您可以尝试“叠加”

“立场：绝对”的祖父母，父母和子女管理问题

1 个答案: