Question

我的问题是：

我希望有一个重叠的框（在示例中是虚线的边框div），它位于较大的背景内容中（在我的例子中是一个谷歌地图，在该示例中由蓝色背景指示。< / p>

我正在使用Chrome（最新版本）并且我发现我可以做我想要的（有点）但是我这样做的方式在水平调整屏幕大小时不起作用，即顶部（即虚线和蓝框顶部之间的距离）似乎与屏幕宽度相比改变了它的垂直距离（这对我来说很奇怪）。

代码是：

<div style="position: relative; height: 100px; display: block; background-color: green">
   <div style="background-color: blue; position: absolute; width: 100%; height: 100%">b</div>
   <div style="border-width: 2px; border-style: dashed; margin: 5% 5% 5% 5%; width: 90%; height: 90%; position: absolute"></div>  
</div>

A JS fiddle example of the problem

从我读到的，有some information谈论确定高度等的父块，但我有点迷失，因为似乎有一些我缺少的知识，我的方法可能是关于我是如何尝试这样做完全错误的。我真的不想以编程方式指定高度或宽度，但宽度似乎以可扩展的方式工作。

Answer 1

百分比保证金与与宽度相关，因此只需设置顶部，左侧，右侧，底部属性。

<div style="top: 5%; left: 5%; right: 5%; bottom: 5%; position:absolute"></div>

了解详情：https://developer.mozilla.org/en-US/docs/Web/CSS/margin

Answer 2

您可以将此样式用于边框：

DEMO

#border{
    border-width: 2px;
    border-style: dashed;
    top: 5%;
    bottom: 5%;
    left: 5%;
    right: 5%;
    position: absolute;
}

CSS问题，垂直对齐的百分比余量

我的问题是：

代码是：

2 个答案: