标签: css-position
如何在HTML中将模式框放在浏览器之外？
我想将一个模态框(位置:绝对)放在浏览器之外,但我不能让它工作.
将模态框放在辅助监视器上会很酷(如果用户有一个,当然).
嘿,这个让我很沮丧:/
推荐指数
解决办法
查看次数
在Firefox中的位置相对
可能重复:
Firefox是否支持位置:相对于表元素？
下面是一个示例:全宽菜单作为表格,ul-s作为下拉菜单. http://cssdesk.com/dW7WS
在ie和opera中工作正常,但在firefox下拉uls拉伸在整个屏幕上!
有帮助吗？
推荐指数
解决办法
查看次数
HTML,CSS - 图像里面的图像,怎么做？
我有这段HTML代码:
<div>
<div>
<image src="image-inside-pic-png.png" alt="">
</div>
<image src="pic.png" alt="" />
</div>
所述pic.png(300×300像素)是主图像.我想把image-inside-pic-png.png(20x20像素)放在里面.当我申请职位时:绝对; 在小图像上,它只是暂时的.如果我改变其中任何一个的大小,它就不再起作用了.
所以我的问题是,如何在大图像中始终移动小图像 - 这个小图像将从顶部开始是15px,从大图像的右边缘开始是30px？
谢谢你的帮助
推荐指数
解决办法
查看次数
如何内嵌显示图像
我有一个导航div有三个图像.每个图像都有一个绝对位于图片底部的标题元素.我试图在同一行上显示彼此相邻的所有三个图像,但图片显示为块.我是新手.非常感谢您的帮助!
HTML:
<div class = "nav">
<div class = "container">
<div class = "image">
<img src = "img1">
</div>
<div class = "title">
<p> text1 </p>
</div>
</div>
<div class = "container">
<div class = "image">
<img src = "img2">
</div>
<div class = "title">
<p> text2 </p>
</div>
</div>
<div class = "container">
<div class = "image">
<img src = "img3">
</div>
<div class = "title">
<p> text3 </p>
</div>
</div>
</div>
CSS:
.nav {
display: inline;
}
.container …推荐指数
解决办法
查看次数
为什么我的 div 和 Button 之间有间隙
有几天我尝试使用 CSS 进行定位和调整大小，但 div 元素和按钮元素之间存在间隙。
主要持有的 div 具有绿色背景，而包含的 div 的持有者具有粉红色背景。
因此，您可以看到充当标签和文本框支架的 div 之间以及充当按钮支架的放置在 div 内的按钮之间存在间隙
我还尝试包含 css 重置但没有成功，我还尝试放置一个全局选择器来重置填充边距和边框
* {
padding:0;
margin : 0
border-width: 0;
}
我真的想知道如何消除这些间隙，以完全控制我的持有者所占用的空间。无论如何，这是我非常简单的代码。
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style>
.interactput {
background-color: green;
}
.interactput div {
display: inline-block;
overflow: hidden;
vertical-align: middle;
background-color: lightpink;
}
.interactput div button {
background-color: lightgoldenrodyellow;
}
</style>
</head>
<body>
<div id="AddessEditor" class="interactput">
<div>
<label>This is a label inside a div</label>
</div>
<div>
<input type="text" value="This is input …推荐指数
解决办法
查看次数
如何将图标添加到 UL 列表选项卡
我创建了一个 JSFIDDLE：http : //jsfiddle.net/Qw2Q7
HTML：
<ul id="tabs">
<li class="active">By Name</li>
<li>By Specialty</li>
<li>By Location</li>
</ul>
我想要做的是在每个选项卡的文本左侧添加一个图像，如下所示：
如何完成将图标添加到如上图所示的每个选项卡？
更新：
推荐指数
解决办法
查看次数
调整浏览器大小时绝对位置错误
我有两个divs ，第一个div位于相对位置，另一个div位于绝对位置，当我将浏览器大小调整为 100% 屏幕尺寸时，一切看起来都很好。
当我调整浏览器大小并且绝对位置的第二个元素出现在容器之外时，问题就出现了，虽然不多，但仍然处于外部的不同位置。
\n\n演示： http: //jsfiddle.net/1pde2gyc/
\n\n我的CSS代码：
\n\n#container_front {\n position:relative;\n width:40%;\n margin-left:auto;\n margin-right:auto;\n}\n\n#front_like {\n position:absolute;\n width:50px;\n height:50px;\n left:75%;\n bottom:-1%;\n}\n问题是front_like，这个 DIV 内部有一个图像，该图像或多或少显示在右侧和中间，当我将屏幕大小调整到 50 或 30% 时，图像会从名为 的容器中消失container_front。
我认为使用绝对和 % 总是保持在相同的位置，但我看到当调整大小移出时，是否存在解决此问题的解决方案？ir css计算位置并留在容器中的同一侧并且没有出去
\n\n谢谢\xc2\xb4s最诚挚的问候。
\n推荐指数
解决办法
查看次数
如何使用百分比绝对定位元素？
我有一个元素，我试图绝对定位到中心和底部附近。无论我是从右边还是左边做 50%，似乎都稍微偏离了中心。
在此屏幕截图中，您可以看到它位于中心左侧一点。
a.down {
font-size:70px;
color:#fff;
text-align: center;
bottom:5%;
position: absolute;
right: 50%;
}
<a href="#we-are-the-leader" class="down">
<i class="fa fa-angle-down"></i>
</a>
推荐指数
解决办法
查看次数
使固定 div 能够水平滚动
我的网站有一个固定的宽度，1024px以便更容易实现较小的屏幕，显示的页眉和页脚位于固定位置。
但是，当用户的宽度小于1024px页眉和页脚时，会被截断，这很好。但是，您无法水平滚动以查看其余部分。
我想解决这个问题与 . 相关CSS，但是我不确定要更改/使用哪些属性。
页面的构造如下：
<body>
<div class='header'>
<div class='headerbar'>
<div class='headerleft'><h1>BMRA Web Client</h1></div>
<div class='headerright'><!--image here--></div>
</div>
</div>
<div class='footer'>
<div class='headerbar'>
<div class='footerleft'></div><div class='footermiddle'></div><div class='footerright'></div>
</div>
</div>
</body>
推荐指数
解决办法
查看次数
为什么 CSS 位置属性会影响旋转动画？
我正在作为开发人员开发一个网站（我没有设计，其他人给了我 HTML/CSS），我们为异步加载组件提供了一个很好的旋转动画。它的永远旋转的动画是由以下 CSS 规则定义的：
animation: spinning 1s infinite linear;（它也有供应商前缀版本，但无关紧要）。
动画spinning定义为：
@keyframes spinning {
0% { transform: rotate(0); }
100% { transform: rotate(360deg); }
}
position: absolute !important我们的设计师为旋转元素添加了一个属性。我试图将它放置在其他元素中，但我认为该属性是不相关的。我一移开position: absolute，旋转器就停止旋转。当我再次添加它时，旋转器再次开始旋转。
我也尝试过其他position值，看起来absolute和fixed工作正常（关于旋转动画），同时relative和static导致动画停止。
为什么 CSS 位置属性会影响旋转动画？
这是重现问题的片段：
@keyframes spinning {
0% { transform: rotate(0); }
100% { transform: rotate(360deg); }
}
@keyframes spinning {
0% { transform: rotate(0); }
100% { transform: rotate(360deg); }
}
#first{ …推荐指数
解决办法
查看次数
文本在图像上的绝对位置
我有一个图像,我需要在右下角添加一个标签.
当我把它推到那里时,它比图像低4px,没有填充也没有边距.
.postImage {
position: relative;
display: inline-block;
}
.post img.thumbnail {
width:100%;
height: 100%;
}
.commercial {
position: absolute;
bottom: 0;
right: 0;
background-color: #666;
color: #fff;
padding: 3px;
font-size: 14px;
font-weight: 100;
}<div class="postImage">
<img class="thumbnail" src="https://dummyimage.com/600x400/f00/fff">
<span class="commercial">commercial</span>
</div>修复它的最佳方法是什么？我不认为
bottom: 4px;
是正确的.
谢谢
推荐指数
解决办法
查看次数
如何将元素与div框的右侧对齐？
如何将元素与div框的右侧对齐？
我的 div
<div id="foo">
<div id="tree">Some Text here</div>
</div>
我的CSS
#foo {
display: block;
width: 500px;
height: 500px;
background: #5e5e5e;
}
#tree {
width: 100px;
height: 30px;
background: #000000;
}
我需要将树放置在foo的右上角。
推荐指数
解决办法
查看次数
CSS z-index 不适用于子元素
我尝试过一个个人项目来制作菜单，这些菜单在最高层（z-index 3）上打开，因此它们覆盖了我的板，但它们所在的标题位于最低层（z-index 1），因此板是分配给中间层（z-index 2）。从逻辑上讲，这对我来说看起来不错，但菜单显示为低于 z-index 2...我已经没有办法解决这个问题了。
* {
margin: 0;
padding: 0;
}
#header {
width: 512px;
height: 256px;
position: fixed;
z-index: 1;
background-color: red;
}
div>ul {
width: 512px;
height: 128px;
position: fixed;
z-index: 3;
background-color: blue;
}
ol {
width: 480px;
height: 320px;
margin: 32px 16px 0 16px;
position: fixed;
z-index: 2;
background-color: green;
}<div id="header">
<ul></ul>
</div>
<ol>
</ol>推荐指数
解决办法
查看次数