针对css–具有绝对位置的页脚不会粘在滚动上和css绝对定位不能用hover吗这两个问题，本篇文章进行了详细的解答，同时本文还将给你拓展css–IFRAME和绝对位置冲突、css–为什么不能(具有绝对
针对css – 具有绝对位置的页脚不会粘在滚动上和css绝对定位不能用hover吗这两个问题，本篇文章进行了详细的解答，同时本文还将给你拓展css – IFRAME和绝对位置冲突、css – 为什么不能(具有绝对位置)在>(具有相对位置)的自动尺寸内？、css – 使第二个div首先出现,没有绝对位置或改变html、css – 在滚动上叠加div等相关知识，希望可以帮助到你。
本文目录一览：- css – 具有绝对位置的页脚不会粘在滚动上（css绝对定位不能用hover吗）
- css – IFRAME和绝对位置冲突
- css – 为什么不能(具有绝对位置)在>(具有相对位置)的自动尺寸内？
- css – 使第二个div首先出现,没有绝对位置或改变html
- css – 在滚动上叠加div
css – 具有绝对位置的页脚不会粘在滚动上（css绝对定位不能用hover吗）
我并没有尝试将其修复并粘贴到页面上.
当我没有足够的内容滚动一切都很好. (至少看起来那样)
对应的HTML：
<footer>
<div>
<p>Sam Sedighian - No rights reseved!</p>
</div>
</footer>
对应的CSS：
.footer_div {
background-image: url("../imgs/dark_dotted2.png");
color: #818787;
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 40px;
padding-top: 10px;
text-align: center;
}
它必须位于页面底部而不是粘性(固定),并且仅在滚动到页面底部时才可见.所以它应该适用于这两个例子：sedighian.github.io/blog/absolute_not_working.html和sedighian.github.io/blog/absolute_not_working2.html
解决方法
position: absolute documentation：
Do not leave space for the element. Instead,position it at a specified position relative to its closest positioned ancestor or to the containing block.
页脚没有任何定位的祖先.请注意,在the Bootstrap example,they explicitly declare position: relative on html.
此外,您还需要添加相当于页脚高度的填充底部,以便为其保留空间.
尝试：
html {
min-height: 100%;
position: relative;
}
body {
padding-bottom: 40px;
}
css – IFRAME和绝对位置冲突
#myiframe {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
但是，没有浏览器似乎支持这一点。
在良好的浏览器中，我可以用引用的CSS样式将IFRAME包含在DIV中，并设置高度& IFRAME的宽度为100％。但是这在IE7中不起作用。没有使用CSS表达式，有没有人设法解决这个问题？
更新
如果IFRAME位于正文的正下方，body / html标签的高度设置为100％，则MattheCat应用了一个工作方案。在我的原始问题中，我没有说明IFRAME的位置以及应用于其容器的样式。希望以下内容能解决这个问题：
<html>
<body>
<div id="container"><iframe id="myiframe"></iframe></div>
</body>
</html>
让我们假设下面的容器CSS：
#container {
position: absolute;
top: 10px;
bottom: 10px;
left: 10px;
right: 10px;
}
如果现在将高度：100％放在IFRAME上，则它的大小不正确。
解决方法
http://jsfiddle.net/sg3s/j8sbX/
现在有一些你需要记住的事情。一个iframe原来是一个内联框架，所以当现代浏览器不关心的时候，设置display：block就可以了。默认情况下，它也有一个边框。任何我们想要完成的任务都需要在iframe容器上完成，否则我们将破坏100％的容器边界。
这就是我们如何把一个元素放在它上面：
http://jsfiddle.net/sg3s/j8sbX/25/(编辑：我的坏，你实际上需要设置边框= 0在iframe为IE7)
应该在IE7中工作正常(IE6不喜欢使用顶部/右/底部/左侧的绝对定位给它布局)
编辑一些额外的解释
我们需要对iframe容器进行风格化，主要是因为一个iframe本身不能让自己的大小与上/左/下/右对齐。但是，将宽度和高度设置为100％将会起什么作用。所以从那里开始，我们简单地将iframe包装在一个元素中，我们可以可靠地创建样式，使窗口小于100％，当父元素没有一个静态高度/宽度时，这些元素默认为大小。
想想，我们实际上可以放弃绝对和阻止。 http://jsfiddle.net/sg3s/j8sbX/26/可能想要仔细检查IE7。
在我们使iframe 100％高和宽之后，我们不能在其上放置任何边距，填充或边框，因为这将被添加到已经100％的高度&宽度。因此，使其大于其容器，对于会导致溢出的div：可见，只是显示一切都在边缘。但这反过来会弄乱我们给我们元素的边距，垫片和偏移量….实际上，要使它只有100％的高度和宽度，你必须确保你删除了iframe默认边框。
通过在我的示例中添加一个更大的边框(如3px)到iframe来尝试，你应该很容易看到它如何影响布局。
css – 为什么不能(具有绝对位置)在>(具有相对位置)的自动尺寸内？
例如：
<ul>
<lihttps://www.jb51.cc/tag/irs/" target="_blank">irst"><a href="#" title="">Home</a></li>
<li><a href="#" title="">Chi siamo</a>
<ul><li><a href="#" title="">item1</a></li><li><a href="#" title="">item2</a></li></ul>
</li>
<li><a href="#" title="">Novità</a></li>
<li><a href="#" title="">Promozioni</a></li>
</ul>
然后设计风格：
/* level 1 Main menu ----------------------------------------- */
#main-menu > ul{ list-style:none; }
#main-menu > ul > li{
float:left;
display:block;
position:relative;
margin-left:1em;
}
#main-menu > ul > li.first{
margin-left:0;
}
/* sub Main menu ----------------------------------------- */
#main-menu > ul > li ul {
position: absolute;
z-index:1000;
display:none;
left:0;
top:28px;
}
#main-menu > ul > li:hover ul {
display:inline-block;
}
#main-menu > ul > li ul li{
float:left;
display:block;
list-style:none;
}
好.所以,我有主菜单,显示水平.我还希望子菜单显示水平.但由于某种原因,ul框不会调整大小以达到总li标签宽度,因此它保持垂直.父亲ul不会遇到这个问题.
我可以通过简单地为孩子ul添加适当的宽度来使其工作,但这不是我想要使用的方式.
任何的想法？
解决方法
然后保持定位和造型分开：我称之为a而不是li
看这里：
http://jsfiddle.net/HerrSerker/T8x2r/2/
#main-menu > ul > li > ul:hover,#main-menu > ul > li:hover > ul {
display: block;
}
应该使用float：left也是
http://jsfiddle.net/T8x2r/3/
css – 使第二个div首先出现,没有绝对位置或改变html
在我的完整的源代码中,我有媒体查询来帮助管理移动和桌面之间的大小.当有人以移动模式访问该网站时,徽标应显示在顶部,“项目”应显示在其下方. (我设置显示：我的图片div上没有隐藏)
问题：
我不能改变HTML中的div的位置,否则会打扰我目前的3片布局.绝对定位不是一个选择,因为我的大部分站点已经动态调整大小,我不希望绝对定位来干扰我还没有测试过的分辨率.这意味着计算边际尺寸将不在此问题之内.
所以绝对定位是不允许的,也不是改变div的顺序.我正在寻找的结果将类似于this,没有重新定位div.
我的问题不在于媒体查询,还是如何使用媒体查询来规模移动.我只是问我如何得到我想要的布局我们有限制(没有绝对假设,没有计算边距,没有改变的div顺序).
我看过的其他问题
Reposition div above preceding element – 第一个回答提示重新定位div,我不能做.第二个答案依赖于计算位置,这可能会干扰其他动态调整元素.
Move The First Div Appear Under the Second One in CSS – 建议我使用绝对定位,我不能做
解决方法
#container { display:flex; flex-direction: column; text-align:center;}
#items { order: 2 }
#logo { order: 1 }
#picture { display: none; }
<div id="container">
<div id="items">Items</div>
<div id="logo">logo</div>
<div id="picture">Picture</div>
</div>
显示：flex只适用于现代浏览器.检查caniuse.
我的Android手机测试显示它在Firefox和Chrome上工作,但不是在Android的浏览器上.
css – 在滚动上叠加div
UPDATE
.container {
width:100%;
height:100%;
position:relative;
}
.container1 {
display:block;
position:fixed;
margin-top:690px;
width:100%;
height:500px;
z-index:1;
background:#333;
}
.container2 {
display:block;
position:absolute;
margin-top:1190px;
width:100%;
height:500px;
z-index:2;
background:#F00;
}
<div>
<div>
info
</div>
<div>
info
</div>
</div>
此调整正常,但底部div(container1)不是500px,而是设置为屏幕大小.我确信这是对代码的简单调整,但我很难过.
谢谢你的帮助！
解决方法
我们的想法是使用JavaScript来监视窗口的滚动位置并相应地修复相应的内容面板,从而在滚动查看时给出新内容与其重叠的错觉.
http://jsfiddle.net/amustill/wQQEM/
今天关于css – 具有绝对位置的页脚不会粘在滚动上和css绝对定位不能用hover吗的介绍到此结束，谢谢您的阅读，有关css – IFRAME和绝对位置冲突、css – 为什么不能(具有绝对位置)在>(具有相对位置)的自动尺寸内？、css – 使第二个div首先出现,没有绝对位置或改变html、css – 在滚动上叠加div等更多相关知识的信息可以在本站进行查询。
本文标签：
