个人中心
文章发布
退出
作者热门文章
- android - 多次调用 OnPrimaryClipChangedListener
- android - 无法更新 RecyclerView 中的 TextView 字段
- android.database.CursorIndexOutOfBoundsException : Index 0 requested, 光标大小为 0
- android - 使用 AppCompat 时，我们是否需要明确指定其 UI 组件(Spinner、EditText)颜色
25
4
这是可笑的基础，但我正在为相对定位的 div 的放置而苦苦挣扎。
我有一个 100vh 高的绝对标题，其中包含标题和标题，后跟两个部分元素，这两个元素都是相对的。第一个具有 100vh 的“顶部”值，将其放在标题的正下方。我假设第二个会简单地跟在第一个之后，但它却将自己附加到标题标题。
我已将页面提炼成一个片段来演示问题。
/* -------------------- UNIVERSAL TYPES -------------------- */
section {
position: relative;
width: 100%;
padding: 40px 0;
}
/* -------------------- HEADER -------------------- */
header {
position: absolute;
height: 100vh;
width: 100%;
background: #111111;
top: 0;
}
header .content {
width: auto;
max-width: 500px;
padding: 10px;
margin: 0 auto;
margin-top: 40vh;
text-align: center;
color: #ffffff;
}
header .content .headline {
font-size: 100px;
margin-bottom: 0px
height:100px;
margin-bottom: 20px
}
header .content .caption {
position: relative;
display: block;
font-size: 20px;
}
/* -------------------- UNIVERSAL CONTENT -------------------- */
.pagecontent {
position: relative;
width: 1000px;
margin: 0 auto;
padding: 30px;
}
.pagecontent h2 {
font-size: 80px;
}
.pagecontent p {
display: block;
width: 100%;
font-size: 20px;
}
/* -------------------- INDIVIDUAL SECTIONS -------------------- */
#About {
top: 100vh;
background-color: #CCC;
color: #333333;
}
#Portfolio {
background-color: #333;
color: #CCC;
}<head>
<link rel="stylesheet" href="https://unpkg.com/purecss@0.6.2/build/pure-min.css" integrity="sha384-UQiGfs9ICog+LwheBSRCt1o5cbyKIHbwjWscjemyBMT9YCUMZffs6UqUTd0hObXD" crossorigin="anonymous">
</head>
<body>
<header>
<div class="content">
<div class="headline">Header.</div>
<div class="caption">Caption on dark background. This header section is 100vh tall and positioned absolutely.</div>
</div>
</header>
<section id="About">
<div class="pagecontent">
<h2> About section header </h2>
<p>All subsequent sections, starting with this one, are relative. My problem is that this section is obscured by the "Portfolio" section, which refuses to add on to the end of the page, and instead inserts itself immediately following the header caption. Duis aliquam finibus sagittis.</p>
</div>
</section>
<section id="Portfolio">
<div class="pagecontent">
<h2>Portfolio section header.</h2>
<p>This section refuses to add on to the end of the page, and instead inserts itself immediately following the header caption.</p>
</div>
</section>
</body>同样，我知道这可能有一个非常简单的解决方案(我对现代 CSS 还是很陌生)，但我已经挠头很久了。
最佳答案
这是因为 position: absolute 属性从默认呈现的主流中删除了内容，并将其放置在您定位的位置。正是由于这个原因，第二个元素无法识别前一个元素并从原始位置开始。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
color: #fff;
font-size: 20px;
}
header {
height: 200px;
background: red;
position: absolute;
top: 0;
left: 0;
width: 100%;
}
section {
position: relative;
top: 200px;
height: 300px;
background: blue;
}<header>This is absolute</header>
<section>This is Relative but aligned by giving TOP: 200px<br>Just to tell where RED DIV ends</section>关于html - 相对定位部分出现在奇怪的地方，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/42524391/
25
4
0
按照目前的情况，这个问题不适合我们的问答形式。我们希望答案得到事实、引用或专业知识的支持，但这个问题可能会引发辩论、争论、投票或扩展讨论。如果您觉得这个问题可以改进并可能重新打开，visit the
操作无法完成。 Places API 库中发生内部错误。如果您认为此错误代表错误，请使用我们社区和支持页面 (https://developers.google.com/places/support)
我正在尝试在我的项目中使用 google places，我将其设置在 fragment 中而不是 Activity 中，我的自动完成 fragment 在 fragment 中。但是，当我尝试搜索它时
我的目的是使用R来查询google api。 我有一个地址和名称列表(属于商店、餐馆等)，我需要为每个地址和名称存储: “纬度”、“经度”、“业务类型” 我的想法是使用 google place ap
我正在寻找设置一个自动完成的谷歌地方小部件。 我有一个带有“searchFieldText”id 的输入类型文本。 这是我的 JS 代码: var inputsec = document.getEle
是否可以使用图形 API(或地址/ zip )按纬度/经度和半径获取地点？我在文档中的任何地方都看不到它 最佳答案 搜索 URL 的以下格式将返回某个位置附近的地点列表: https://graph.
我正在探索 Google API，主要是 Places API。由于对 Google Places API 的请求数限制为 100,000，因此我正在寻找方法来最大限度地减少发送到 API 的请求数。
伙计们，我在我的应用程序中有一个功能，可以使用 GetFiles 在特定目录中搜索特定文件。方法 System.IO.Directory.GetFiles(string path, string
我已经在 Laravel 5.3 上使用 where 查询成功创建了许多函数，但是这次发生了一些奇怪的事情。 public function show($id){ $artikel = Art
我正在为我的 iPhone 应用程序使用 Facebook 图形 API 来获取附近地点的列表，我使用带有一些参数的“搜索”请求。我得到的响应是一个包含以下信息的地点列表:“纬度”、“经度”、“名称”
我有一个 Android 应用程序，我在其中使用 Google map 显示附近的地方，如加油站、药店等。我正在使用 map 和地点 API。 https://maps.googleapis.com/
我是一名优秀的程序员,十分优秀！