Html & Css - 改变重力

Question

我正在构建一个网站，其中的元素实际上只位于底部。我希望我的垂直起始位置从底部而不是顶部开始，并且我希望在不将这些元素从页面的正常流中取出（因此没有绝对定位）的情况下执行此操作，以便一个元素的位置可以取决于对方的位置。我该怎么做呢？这是 'elements at the bottom' 事物的直观解释。 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 & Css - 改变重力

Html & Css - Changing the Gravity

html

css

positioning