使用位置的简单div布局

Question

让我们看看我是否可以正确解释这一点。我想要一个标题，始终可见和内容以及隐藏在内容后面的页脚，当滚动到页脚时变为可见。这是我到目前为止所拥有的......

    #container {
	height:100%;
	width:100%;
	position:relative;
    }

    #top {
	height:25vh;
	width:100%;
	background-color:red;
	position:fixed;
	top:0;
    }

    #content {
	height:120vh;
	width:100%;
	background-color:green;
	position:relative;
    }

    #bottom {
	height:35vh;
	width:100%;
	background-color:blue;
	position:fixed;
	bottom:0;
    }
    

    <div id="container">

	<div id="top">
	
	</div>
	
	<div id="content">
	
	</div>
	
	<div id="bottom">
	
	</div>

    </div>

此代码目前的作用：标题隐藏在内容后面，页脚始终可见重叠内容。

以下是当前的测试页... http://next-factor.com/test-layout.php

非常感谢很多帮助。谢谢！

Answer 1

在z-index

中提供#top

#top {
    background-color: red;
    height: 25vh;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
}

它会使标题可见。

并从position:fixed

中删除#bottom

#bottom {
    background-color: blue;
    bottom: 0;
    height: 35vh;
    width: 100%;
}

希望这能解决您的问题

这是工作示例http://jsfiddle.net/a3ru9d4d/

在这个例子中，我在容器中添加了padding top，这样容器内的内容就不会隐藏在标题后面。

Answer 2

我想你想要这样的东西： -

＆＃13;

＆＃13;

*{margin:0;padding:0}
#container {
	height:100%;
	width:100%;
	position:relative;
    }

    #top {
	height:25vh;
	width:100%;
	background-color:red;
	position:fixed;
	top:0;
	z-index: 1;
    }

    #content {
	height:120vh;
	width:100%;
	background-color:green;
	position:relative;
    }

    #bottom {
	height:35vh;
	width:100%;
	position:relative;
	z-index:-2;
	background-color:#31353a;


    }

＆＃13;

	<div id="top">
	
	</div>
	
	<div id="content">
	
	</div>
	
		<div id="bottom">
		Footer	
		</div>

    </div>

＆＃13;

＆＃13;

＆＃13;

我希望它会对你有所帮助。

Answer 3

看看这个。我已经介绍了两个新的CSS定义，它们实现了我想要的目标。

https://jsfiddle.net/b8my8h5j/

1. 我添加了z-index个定义。索引越高，非静态定位堆栈越高。内容标题为30，因此内容显示在20上方，但页脚有10，因此t始终位于后面。
2. 我在内容中添加了margin-bottom，以便您可以向下滚动并让页脚完全可见。

更新： https://jsfiddle.net/b8my8h5j/1/

1. 还清除了主体和html标签上的填充/边距，以便这些块紧密贴合在一起。
2. 在内容中添加了margin-top，以便绿色框的顶部可见。

Answer 4

我认为这会产生你想要的东西：所有三个z-indexes，并在content底部腾出空间，当你滚动到页面末尾时页脚完全显示

＆＃13;

＆＃13;

#container {
  height:100%;
  width:100%;
  position:relative;
}

#top {
  height: 25vh;
  width: 100%;
  background-color: red;
  position: fixed;
  top: 0;
  z-index: 3;
}

#content {
  height: 120vh;
  width: 100%;
  background-color: green;
  position: relative;
  margin-bottom: 33vh;
  z-index: 2;
}

#bottom {
  height: 35vh;
  width: 100%;
  background-color: blue;
  position: fixed;
  bottom: 0;
  z-index: 1;
}

＆＃13;

   <div id="container">

	<div id="top">
	
	</div>
	
	<div id="content">
	
	</div>
	
	<div id="bottom">
	
	</div>

    </div>

＆＃13;

＆＃13;

＆＃13;