Javascript 如何在不切断顶部div的情况下将一个div定位在另一个div之上_Javascript_Html_Css

Javascript 如何在不切断顶部div的情况下将一个div定位在另一个div之上

javascript html css

Javascript 如何在不切断顶部div的情况下将一个div定位在另一个div之上,javascript,html,css,Javascript,Html,Css,我正在努力实现附加的布局。我试图让我的弹出卡位于背景div上方，但内容在背景div结束处被切断非常感谢您的帮助：） /*关于我部分*/ .关于我{ 位置：相对位置；垫面：10%；高度：500px；利润率最高：-7%； z指数：-1；背景色：#E5460E；剪辑路径：多边形（0 100%，100%100%，100%0，0-100%）； } .关于信用卡{ 位置：绝对位置；最高：20%；左：0；保证金：0自动； z指数：1000000；宽度：80%；高度：500px；背景色

我正在努力实现附加的布局。我试图让我的弹出卡位于背景div上方，但内容在背景div结束处被切断

非常感谢您的帮助：）

/*关于我部分*/
.关于我{
位置：相对位置；
垫面：10%；
高度：500px；
利润率最高：-7%；
z指数：-1；
背景色：#E5460E；
剪辑路径：多边形（0 100%，100%100%，100%0，0-100%）；
}
.关于信用卡{
位置：绝对位置；
最高：20%；
左：0；
保证金：0自动；
z指数：1000000；
宽度：80%；
高度：500px；
背景色：#fff；
盒影：0px2px4pRGBA（0,0,0,0.22）；
}


我的故事
Lorem ipsum dolor sit amet，是一位杰出的献身者。奥克西罗波蒂酒店。伊库利斯洛博提斯多洛胎生。休止性不作为和不平等。Donec nunc risus，posuere interdum efficitur id，Dignessim eget enim。两种方法都适用于欧盟。


非内克兽人万岁。埃尼安葡萄品种多洛·波苏尔是一种发酵剂。梅塞纳斯是猫的帮手。临终关怀、酒后驾车、无酒精饮料、无酒精饮料、无酒精饮料、无酒精饮料。这是欧盟的钻石效率。

这是因为您的内容div（

.about card

）位于

.about me

div中，并且被CSS中的

剪辑路径切断。在.about me
中创建一个名为.about me background
的单独div，并为其设置样式：

/*关于我部分*/
.关于我的背景{
位置：相对位置；
垫面：10%；
高度：500px；
利润率最高：-7%；
z指数：-1；
背景色：#E5460E；
剪辑路径：多边形（0 100%，100%100%，100%0，0-100%）；
}
.关于信用卡{
位置：绝对位置；
最高：20%；
左：0；
保证金：0自动；
z指数：1000000；
宽度：80%；
高度：500px；
背景色：#fff；
盒影：0px2px4pRGBA（0,0,0,0.22）；
}

我的故事
Lorem ipsum dolor sit amet，是一位杰出的献身者。奥克西罗波蒂酒店。伊库利斯洛博提斯多洛胎生。休止性不作为和不平等。Donec nunc risus，posuere interdum efficitur id，Dignessim eget enim。两种方法都适用于欧盟。


非内克兽人万岁。埃尼安葡萄品种多洛·波苏尔是一种发酵剂。梅塞纳斯是猫的帮手。临终关怀、酒后驾车、无酒精饮料、无酒精饮料、无酒精饮料、无酒精饮料。这是欧盟的钻石效率。

这是因为您的内容div（.about card
）位于.about me
div中，并且被CSS中的剪辑路径切断。在.about me
中创建一个名为.about me background
的单独div，并为其设置样式：

/*关于我部分*/
.关于我的背景{
位置：相对位置；
垫面：10%；
高度：500px；
利润率最高：-7%；
z指数：-1；
背景色：#E5460E；
剪辑路径：多边形（0 100%，100%100%，100%0，0-100%）；
}
.关于信用卡{
位置：绝对位置；
最高：20%；
左：0；
保证金：0自动；
z指数：1000000；
宽度：80%；
高度：500px；
背景色：#fff；
盒影：0px2px4pRGBA（0,0,0,0.22）；
}

我的故事
Lorem ipsum dolor sit amet，是一位杰出的献身者。奥克西罗波蒂酒店。伊库利斯洛博提斯多洛胎生。休止性不作为和不平等。Donec nunc risus，posuere interdum efficitur id，Dignessim eget enim。两种方法都适用于欧盟。


非内克兽人万岁。埃尼安葡萄品种多洛·波苏尔是一种发酵剂。梅塞纳斯是猫的帮手。临终关怀、酒后驾车、无酒精饮料、无酒精饮料、无酒精饮料、无酒精饮料。这是欧盟的钻石效率。

伙计！尝试使用页眉、页脚、小节等后面的结构使其变得简单，并开发代码。
试试这个片段，希望它对你有用
body{
margin:auto;
}

header{ 
height: 70%;
width: 100%;
background:red;
}

footer{
height: 30%;
width: 100%;
position:absolute;
background:#fff;
}

#insidebox{ /*align your css based on your requirement*/
position: absolute;
width: 300px;
height: 200px;
z-index: 15;
top: 50%;
left: 50%;
margin: -100px 0 0 -150px; /* adjust accordingly */
background: red;
border:1px solid;
background:white;  
}

.rotateCSS{
/*css goes here for rorating the text*/
}

<body>
<header>
<section id="rotateCSS">
<div> About Me </div>
</section>
</header>
<footer>
<section>
</section>
</footer>

<section id="insidebox">
<div>
    hello for box in center
</div>
</section>
</body>

正文{
保证金：自动；
}
标题{
身高：70%；
宽度：100%；
背景：红色；
}
页脚{
身高：30%；
宽度：100%；
位置：绝对位置；
背景：#fff；
}
#insidebox{/*根据您的需求调整css*/
位置：绝对位置；
宽度：300px；
高度：200px；
z指数：15；
最高：50%；
左：50%；
余量：-100px 0-150px；/*相应调整*/
背景：红色；
边框：1px实心；
背景：白色；
}
.轮换{
/*css在这里用于对文本进行排序*/
}
关于我
您好，中间的盒子
伙计！尝试使用页眉、页脚、小节等后面的结构使其变得简单，并开发代码。
试试这个片段，希望它对你有用
body{
margin:auto;
}

header{ 
height: 70%;
width: 100%;
background:red;
}

footer{
height: 30%;
width: 100%;
position:absolute;
background:#fff;
}

#insidebox{ /*align your css based on your requirement*/
position: absolute;
width: 300px;
height: 200px;
z-index: 15;
top: 50%;
left: 50%;
margin: -100px 0 0 -150px; /* adjust accordingly */
background: red;
border:1px solid;
background:white;  
}

.rotateCSS{
/*css goes here for rorating the text*/
}

<body>
<header>
<section id="rotateCSS">
<div> About Me </div>
</section>
</header>
<footer>
<section>
</section>
</footer>

<section id="insidebox">
<div>
    hello for box in center
</div>
</section>
</body>

正文{
保证金：自动；
}
标题{
身高：70%；
宽度：100%；
背景：红色；
}
页脚{
身高：30%；
宽度：100%；
位置：绝对位置；
背景：#fff；
}
#insidebox{/*根据您的需求调整css*/
位置：绝对位置；
宽度：300px；
高度：200px；
z指数：15；
最高：50%；
左：50%；
余量：-100px 0-150px；/*相应调整*/
背景：红色；
边框：1px实心；
背景：白色；
}
.轮换{
/*css在这里用于对文本进行排序*/
}
关于我
您好，中间的盒子
试试这个，我把HTML放在
<div class="about">
    <p>ABOUT ME</p>
</div>
<div class="about__content">
    ...
</div>


关于我
...

然后使用position:absolute
进行覆盖
希望能对你有所帮助，兄弟
-
只是一个演示：
试试这个，我把HTML作为
<div class="about">
    <p>ABOUT ME</p>
</div>
<div class="about__content">
    ...
</div>


关于我
...

然后使用position:absolute
进行覆盖
希望能对你有所帮助，兄弟
-
只是一个演示：
剪辑路径
正在执行此操作。感谢您提供所需的布局图像！许多用户忘记了提供这些有价值的信息。clip path
正在这样做。感谢您的包含