Question

我正在建立一个网站，其元素实际上只在底部。我希望我的垂直起始位置从底部而不是顶部开始，我想这样做而不将这些元素从页面的正常流程中取出（因此没有绝对定位），以便一个元素的位置可以依赖于对方的立场。我该怎么做呢？这是对“底部元素”的视觉解释。 http://imgur.com/YrzkQfi

    <head>
    <style>
        body {
            background: url('Index-Background.jpg') no-repeat center center fixed;
            background-size: cover;
        }
        section {
            margin-left: 2%;
        }
        nav {
            margin-bottom: 6.66%;
        }
    </style>
</head>
<body>
    <main>
        <section>
            <h1>The Great Composers</h1>
            <div>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a pie\sum dolor sit amet..", comes from a line in section 1.10.32.</div>
        </section>
        <nav>
            <ul>
                <li><a href="#0">Gershwin</a></li>
                <li><a href="#0">Debussy</a></li>
            </ul>
        </nav>
    </main>
</body>

Answer 1

尝试更改section和nav订单

<nav>
    <ul>
        <li><a href="#0">Gershwin</a></li>
        <li><a href="#0">Debussy</a></li>
    </ul>
</nav>
<section>
    <h1>The Great Composers</h1>
    <div>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a pie\sum dolor sit amet..", comes from a line in section 1.10.32.</div>
</section>

Answer 2

试试这个

html, body {
      position: relative; 
     ...
   }
html {
     position: relative;  
     ...
   }

编辑：这可能会有所帮助。 How can I position my div at the bottom of its container?

Answer 3

嗯，我仍然不完全确定你想要达到的目标，但是如果你试图让导航栏保持水平。您需要添加以下css：

li {
  display: inline-block;
  padding-right:10px;
}

Answer 4

如何使用position:fixed设置nav定位。以下是我所附图片的结论：JSFiddle

Answer 5

嗯，有一些解决方法。你可以这样做，

html, body {
  height: 100%;
}
body {
  display: table;
}
main {
  display: table-cell;
  vertical-align: bottom;
}

请参阅工作示例：https://jsfiddle.net/L1w9m3mz/

Answer 6

使用flexbox - 所有现代浏览器都支持
将.reverse添加到要反转的位置。

http://caniuse.com/#search=flexbox

.reverse {
     display: flex;
     flex-direction: column-reverse;
  }

Html＆amp; Css - 改变重力

6 个答案: