Question

我有这个示例代码

＆＃13;

h2.pos_left {
    position: relative;
    top: 50%;
}

＆＃13;

<h2 class="pos_left">This heading is moved left according to its normal position</h2>

＆＃13;

我正在尝试与top％进行相关工作。有没有办法让这项工作？其他选择是强制绝对顺应流程。我的想法是有几个div占用页面的一些百分比，所以当窗口较小时它们会响应。如果它是绝对的并且我使窗口变得更小，那么流动的效果就不会令人恼火，因为元素会相互叠加。

任何想法都非常有用。或许有一些开箱即用的想法

Answer 1

您需要将<html>和<body>标记设置为100％高度：

＆＃13;

h2.pos_left {
    position: relative;
    top: 50%;
}

html, body {
  height: 100%;
}

＆＃13;

<h2 class="pos_left">This heading is moved left according to its normal position</h2>

＆＃13;

Answer 2

并使你的div响应使用此

＆＃13;

h2.pos_left {
   position: relative;
   top: 50%;
   float: left;
   margin: 10px;
   padding: 10px;
   max-width: 300px;
   height: 300px;
}

html, body {
  height: 100%;
}

＆＃13;

相对位置与顶部的百分比

2 个答案: