Html 将div置于另一个div之上，使其在所有设备上保持不变_Html_Jquery_Css

Html 将div置于另一个div之上，使其在所有设备上保持不变

html jquery css

Html 将div置于另一个div之上，使其在所有设备上保持不变,html,jquery,css,Html,Jquery,Css,我正在努力使一个部门的职位略高于我的其他部门。plate和cake lower div正好位于页面的中间，所以它们很好，但是cake top div需要在页面中间上方40-50px。我可以通过更改边距属性来实现这一点，但这仅适用于我的设备。css中应该修改哪些属性，以使此设计在所有屏幕大小上都具有响应性正文{ 背景颜色：李子； } .集装箱{ 边框：2件纯黑；左：0；右：0；排名：0；底部：0；保证金：自动；位置：绝对位置； } .蛋糕放低{ 边框：1px实心#654321；背

我正在努力使一个部门的职位略高于我的其他部门。plate和cake lower div正好位于页面的中间，所以它们很好，但是cake top div需要在页面中间上方40-50px。我可以通过更改边距属性来实现这一点，但这仅适用于我的设备。css中应该修改哪些属性，以使此设计在所有屏幕大小上都具有响应性

正文{
背景颜色：李子；
}
.集装箱{
边框：2件纯黑；
左：0；
右：0；
排名：0；
底部：0；
保证金：自动；
位置：绝对位置；
}
.蛋糕放低{
边框：1px实心#654321；
背景色：#654321；
高度：100px；
宽度：100px；
左：0；
右：0；
排名：0；
底部：0；
保证金：自动；
位置：绝对位置；
边界左上半径：20%；
边界右上角半径：20%；
边框右下半径：20%；
边界左下半径：20%；
}
.蛋糕面{
宽度：100px；
高度：50px；
背景#9f6934；
边界半径：50px/25px；
左：0；
右：0；
排名：0；
底部：70像素；
保证金：自动；
位置：绝对位置；
}
.盘子{
宽度：250px；
高度：125px；
背景：白色；
边界半径：125px/64px；
左：0；
右：0；
排名：0；
底部：0；
保证金：自动；
位置：绝对位置；
}

您可以使用的工具你好!！我认为您正在寻找的是以下组合：

，及

函数的作用是：在浏览器中组合使用不同单位进行计算的长度

vh

单元是一个基于视口高度的响应单元

1vh

是页面可见高度的1%。你也可以用除法和乘法做一些有趣的事情，这也可以解释

vw

单位

适用于你的例子虽然您需要更改具体的计算，但我已对

.cake top

的代码进行了以下更改：

bottom: calc(70px + 5vh);

这将向您展示如何组合现有的

70px

值以同时考虑视口高度。正如我所提到的，您可能还需要考虑视口宽度-玩一玩

正文{
背景颜色：李子；
}
.集装箱{
边框：2件纯黑；
左：0；
右：0；
排名：0；
底部：0；
保证金：自动；
位置：绝对位置；
}
.蛋糕放低{
边框：1px实心#654321；
背景色：#654321；
高度：100px；
宽度：100px；
左：0；
右：0；
排名：0；
底部：0；
保证金：自动；
位置：绝对位置；
边界左上半径：20%；
边界右上角半径：20%；
边框右下半径：20%；
边界左下半径：20%；
}
.蛋糕面{
宽度：100px；
高度：50px；
背景#9f6934；
边界半径：50px/25px；
左：0；
右：0；
排名：0；
底部：计算（70px+5vh）；
保证金：自动；
位置：绝对位置；
}
.盘子{
宽度：250px；
高度：125px；
背景：白色；
边界半径：125px/64px；
左：0；
右：0；
排名：0；
底部：0；
保证金：自动；
位置：绝对位置；
}