标签: css-position
css 定位绝对不能按预期工作
我正在学习 CSS 并且正在摆弄 CSS 位置属性。据我了解，position:absolute将相对于浏览器窗口放置元素，并且下面的所有元素将被推到具有位置：绝对的元素之前。但是当我运行小提琴时，我发现默认情况下该元素放置在h1标签下方，而不是窗口的左上角。请让我知道我的理解哪里出了问题。下面是代码：
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<h1>Just some text to check the css positioning in the browserJust some text to check the css positioning in the browserJust some text to check the css positioning in the browserJust some text to check the css positioning in the browserJust some text to check the css positioning in the browserJust some text to check the css positioning in the …推荐指数
解决办法
查看次数
FlexBox - 绝对位置的行为类似于固定
我有一个非常基本的任务，看起来应该很容易使用任何实际上有意义的 GUI 标记语言来完成。不幸的是，HTML/CSS 不是这样的标记语言。
在下面的例子中。我有一个“圣杯”页面布局，它在 CSS 中使用 Flexbox 样式。主要布局还可以......它甚至滚动得很好。但是，当我使用绝对定位将元素添加到主体（中心/黄金区域）时，特定元素的位置表现得就像是固定的，而不是绝对的。在下面的代码中，我将其设为 128x128 的 div 并将其着色为#00ffff（青色）。一个理智的人会认为 div 会出现在主体区域（黄金部分）的左上角...但是，flexbox 似乎将我的绝对定位视为固定定位。下面的代码就是演示这个问题所需的全部内容。
我需要一个表现符合预期的解决方案。
<body>
<header>
<h1>FLEXBOX LAYOUT PROOF OF CONCEPT</h1>
</header>
<div class="layout__body">
<main class="layout__content">
<div id="absolutepositioned">MESSED UP</div>
<div style="color: #00FFFF;"><b>the blue box should be here</b> </div>
</main>
<nav class="layout__nav layout__columns">
NAV ITEMS<br>
NAV ITEMS<br>
NAV ITEMS<br>
NAV ITEMS<br>
NAV ITEMS<br>
NAV ITEMS<br>
NAV ITEMS<br>
NAV ITEMS<br>
NAV ITEMS<br>
NAV ITEMS<br>
</nav>
<aside class="layout__aside layout__columns">YOUR VIAGRA ADS HERE</aside>
</div>
<footer> FOOTER
</footer>
</body>
<style>
body { …推荐指数
解决办法
查看次数
绝对容器中的 CSS 弹性布局
我有以下 HTML/CSS，其中有一个.full-width.section3具有绝对高度的容器 ( )。然而，将内容居中是行不通的。由于我是 Flex 模型的新手，有人可以向我解释一下，为什么三个 childdiv不垂直居中？
body {
margin:0;
}
.container {
display:flex;
flex-wrap:wrap;
height:100vh;
background-color: white;
}
.full-width {
width:100%;
}
.full-width.section3{
height: 795px;
}
.full-width > .content > .third-parent{
height: 100%;
display: flex;
}
.full-width > .content > .third-parent > .third{
position: relative;
flex: 1 1 0px;
width: 100%;
border: 1px solid black;
}
.full-width > .content > .third-parent > .third > img{
position: absolute;
width: 100%;
height: auto;
left: 50%;
top:50%;
visibility: …推荐指数
解决办法
查看次数
Safari“位置：固定”在滚动上重叠
在 Safari (Mac)** 上，当我在Bhooks.com上滚动时，卡片会与网页的页脚和页眉重叠（位置：固定）。到目前为止我无法弄清楚为什么，我希望在这里找到一些帮助。
我还将 Bootstrap 升级到了最新版本，只是为了确定一下。
这是该问题的屏幕截图：
我知道这是一个非常具体的错误，而且我没有一个最小的例子（因为在我的 Mac VM 上进行开发是一场噩梦）。但至少问题很容易解决并且易于调试。
感谢您的帮助！
** 在我的例子中，macOS mojave 10.14.3 和 Safari 12.0.3
推荐指数
解决办法
查看次数
是否可以根据被定位元素的右下角绝对定位元素？
使用绝对定位时，位置是从被定位元素的左上角开始计算的。
是否可以改为从右下角定位？
在下面的 JS Fiddle 示例中，我想让 的右下角#position-me触摸 的左上角#wrapper，所以它看起来像这样（粗略地 - 我没有花时间精确对齐）。的宽度和高度#position-me根据内容而变化 - 如果它是固定的宽度/高度，那就很容易了:)
#wrapper {
position: absolute;
bottom:0;
right:0;
width: 100px;
height: 100px;
background-color: red;
}
#position-me {
position: absolute;
width: auto;
height: auto;
background: green;
}<div id='wrapper'>
<div id='position-me'>
Text is here
</div>
</div>https://jsfiddle.net/pfa89bu1/
#wrapper是绝对定位的并且#position-me嵌套在里面#wrapper。这些事情我真的不想改变，如果我能帮助的话。
我知道我可以用 JS 解决这个问题，但我想知道是否有一个纯 CSS 解决方案。
推荐指数
解决办法
查看次数
隐藏其父母背后的div？
<div class="content-wrapper">
<div class="popup">
<div class="close">
</div>
</div>
</div>
.content-wrapper相对定位并包含所有页面内容(不仅仅是弹出窗口).
.popup绝对定位.
.close也绝对定位.
当光标进入弹出窗口时,我有一些javascript移动关闭(所以我有一个很好的关闭栏出现在侧面).我发现这样做的最好方法就是使用jQuery动画.隐藏/显示甚至会造成口吃效果.stop()无法解决.我的问题是试图将.clop隐藏在.popup后面.无论我为两个div设置什么z-index .close都不会落后于.popup.
是否有可能在另一个绝对定位的div中有一个绝对定位的div位于其父级后面,如果是这样,怎么样？
推荐指数
解决办法
查看次数
使用cout打印一个(浮点)小数
我有一个浮点数,我想在十进制后打印一位数.我怎么能用这个cout呢？我尝试了以下代码,但它给出了错误的显示.
#include <iostream>
using namespace std;
int main()
{
float time = 2.2;
cout.precision(1);
cout << time << endl;
return 0;
}
推荐指数
解决办法
查看次数
在响应式设计中固定位置
我正在使用响应式框架1140px.在移动版本中,我必须修复徽标的位置,但不要将其与滚动内容重叠.基本上修复位置,但不要将图像固定在滚动上,这可以实现吗？
推荐指数
解决办法
查看次数
将图标置于元素边框的顶部
我正在尝试在元素的边框上叠加一个图标.我目前的解决方案涉及绝对定位 我可以通过使用像left: 40%我这样的东西来尽可能地靠近中心,但是一旦我调整窗口大小,它就会移出中心.
这是一个JSFiddle,展示了到目前为止我所拥有的东西.您会看到,如果您调整窗口大小,图标会移出中心.https://jsfiddle.net/83on2jr9/
有更简单的方法吗？
推荐指数
解决办法
查看次数
试图将其修复到屏幕的右上角
我正试图修正这个右上角,这意味着它在滚动,最大化和最小化窗口时保持最右边.像位置:绝对; 顶部:0; 右:0; .....我无法上班.你能帮助语法吗？
<div align="center" class="socialbtns">
<ul>
<li><a href="http://…..” target="_blank" class="fa fa-lg fa-linkedin"></a>
</li>
<li><a href="https://......target="_blank" class="fa fa-lg fa-facebook"></a>
</li>
<li><a href="http://…..” target="_blank" class="fa fa-lg fa-twitter"></a></li>
<li><a href="https://….” target="_blank" class="fa fa-lg fa-google-plus"></a>
</li>
</ul>
</div>
CSS如下
@import url('http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css');
a, a:hover {
text-decoration: none;
}
.socialbtns, .socialbtns ul, .socialbtns li {
margin: 0;
padding: 5px;
}
.socialbtns li {
list-style: none outside none;
display: inline-block;
}
.socialbtns .fa {
width: 40px;
height: 28px;
color: #576267;
background-color: transparent;
border: 1px solid …推荐指数
解决办法
查看次数