html中堆叠顺序怎么写,html – 将项目堆叠在彼此之上

我正试图抓住flex,并努力创造我追求的东西.

我想做什么

>全屏容器

>两个div元素,一个右对齐,宽度为640px,另一个左对齐,占用剩余空间

发生了什么

我的元素在屏幕的中心彼​​此叠加显示.

码

div.flex {

display: flex;

flex-direction: row;

flex-wrap: nowrap;

justify-content: space-around;

align-items: stretch;

height: 100vh;

}

div.hero {

background-size: cover;

background-position: center bottom;

position: relative;

height: 100vh;

width: 100%;

margin: auto;

}

div.timeline {

width: 640px;

margin: auto;

}

div.header {

position: absolute;

top: 50%;

text-align: center;

width: 100%;

/* color: #fff; */

-ms-transform: translate(0,-50%);

/* IE 9 */

-webkit-transform: translate(0,-50%);

/* Safari */

transform: translate(0,-50%);

-ms-transform: translate(0,calc(-50% - 66px));

/* IE 9 */

-webkit-transform: translate(0,calc(-50% - 66px));

/* Safari */

transform: translate(0,calc(-50% - 66px));

}

Title

Subtitle

• Quisque ac laoreet purus,eu dapibus ligula. Mauris nec tincidunt mi,eget finibus sem. Morbi viverra malesuada lobortis. Suspendisse sed augue luctus ex molestie convallis.

• Lorem ipsum dolor sit amet,consectetur adipiscing elit. Sed sed erat consectetur,tempor odio sit amet,euismod sapien.

• Lorem ipsum dolor sit amet,euismod sapien.

• Quisque ac laoreet purus,eget finibus sem. Morbi viverra malesuada lobortis. Suspendisse sed augue luctus ex molestie convallis.

• Quisque ac laoreet purus,eget finibus sem. Morbi viverra malesuada lobortis. Suspendisse sed augue luctus ex molestie convallis.

题

我如何使用flex将这两个元素(100vh)连续排在下面？

+------------------------------------------+

|.flex |

|+-------------------------+ +------------+|

||.hero | |.timeline ||

|| | | ||

|| | | ||

|+-------------------------+ +------------+|

+------------------------------------------+