标签: css-position
如何在绝对位置右侧放置div
我有一个页面,必须在不打扰实际页面的情况下显示动态消息框.此消息框必须出现在页面的右上角,与现有内容重叠.
我试过用,position: absolute但后来我无法将它放在右上角.我也无法使用,left因为我支持Bootstrap的响应式设计.
这是一个示例标记
<html>
<body>
<div class="container">
<!-- Need to place this div at the top right of the page-->
<div class="ajax-message">
<div class="row">
<div class="span9">
<div class="alert">
<a class="close icon icon-remove"></a>
<div class="message-content">
Some message goes here
</div>
</div>
</div>
</div>
</div>
<!-- Page contents starts here. These are dynamic-->
<div class="row">
<div class="span12 inner-col">
<h2>Documents</h2>
</div>
</div>
</div>
</body>
</html>
此消息框应具有50%相对于消息框的宽度,.container并且消息框的左侧不应与其重叠.即我们应该能够点击/选择左侧的内容.
请在这里找到样品.
请帮我解决这个问题.
推荐指数
解决办法
查看次数
如何防止绝对定位的元素影响滚动条？
考虑一个坐在容器中的autosuggest输入,其中包含一些内容和一个垂直滚动条:
显示自动提示建议时,它们应显示在内容的顶部,而不会影响容器的滚动条.
我希望得到:
请注意,滚动条与上面完全相同.
但是,我得到以下内容:
请注意,滚动条会受到影响,建议会被删除.
为什么绝对定位的建议会影响容器的滚动条？
你会如何解决这个问题？
笔记:
- 滚动容器时,输入和建议应一起移动.
- 您可以修改HTML,但输入和建议列表应保留在内部
.autosuggest(考虑.autosuggest作为第三方组件,其HTML无法更改,但您可以更改其CSS). - 如果有帮助,您可以使用flexbox.
- 我正在寻找CSS唯一的解决方案.请不要Javascript.
.container {
height: 100px;
width: 300px;
margin-top: 50px;
overflow-y: auto;
border: 1px solid black;
}
.autosuggest {
position: relative;
width: 250px;
}
.input {
font-size: 16px;
width: 230px;
padding: 5px 10px;
border: 0;
background-color: #FFEBBF;
}
.suggestions {
list-style-type: none;
margin: 0;
padding: 5px 10px;
width: 230px;
background-color: #85DDFF;
position: absolute;
}
.content {
width: 120px;
padding: 5px 10px;
} …推荐指数
解决办法
查看次数
IE7相对/绝对定位错误,动态修改页面内容
我想知道是否有人知道如何解决IE7中的以下问题:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>IE7 absolute positioning bug</title>
<style type="text/css">
#panel { position: relative; border: solid 1px black; }
#spacer { height: 100px; }
#footer { position: absolute; bottom: 0px; }
</style>
<script type="text/javascript">
function toggle() {
var spacer = document.getElementById("spacer");
var style = "block";
if (spacer.style.display == "block" || spacer.style.display == "") {
style = "none";
}
spacer.style.display = style;
}
</script>
</head>
<body>
<div id="panel">
<button onclick="toggle();">Click me</button>
<br /><br …推荐指数
解决办法
查看次数
位置'初始'跨浏览器 - css
我有一个css冲突,所以我不得不反对一个处理某些类的绝对定位属性.myclass.但在一个案例中,我希望一个div与.myclass类没有绝对的定位.所以我说position: initial,它适用于Chrome,但它是跨浏览器吗？我用谷歌搜索,发现没有什么确切的.
推荐指数
解决办法
查看次数
CSS:显示:内联块和定位:绝对
请考虑以下代码:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<style type="text/css">
.section {
display: block;
width: 200px;
border: 1px dashed blue;
margin-bottom: 10px;
}
.element-left,
.element-right-a,
.element-right-b {
display: inline-block;
background-color: #ccc;
vertical-align: top;
}
.element-right-a,
.element-right-b {
max-width: 100px;
}
.element-right-b {
position: absolute;
left: 100px;
}
</style>
<title>test</title>
</head>
<body>
<div class="section">
<span class="element-left">some text</span>
<span class="element-right-a">some text</span>
</div>
<div class="section">
<span class="element-left">some text</span>
<span class="element-right-a">some more text to force line wrapping</span>
</div>
<div class="section">
<span class="element-left">some text</span> …推荐指数
解决办法
查看次数
如何做一个没有包装的`float:left`？
我有一个box1具有一定宽度的容器(可能会根据其内容而改变).该框包含box2具有固定宽度的框(可以是图标).旁边box2,我有box3一些文字.我希望文本使用右侧可用的所有空间box2.使用下面粘贴的HTML,您会得到:
到现在为止还挺好.如果文本变得更长,它不会环绕box2(这是我想要的),但是,它不会使box1成长,这是我的问题.你会告诉我"嘿,如果你做box3了position: absolute,你怎么能指望它box1成长？".好吧,我不是然后,我怎么能box3在旁边显示box2,使用所有可用的水平空间,并box1在必要时进行增长？(我是否需要说我喜欢IE6上的这项工作,并避免使用表？)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<style type="text/css">
#box1 { position: relative }
#box3 { position: absolute; left: 2.5em; right: .5em; top: .5em }
/* Styling */
#box1 { background: #ddd; padding: 1em 0.5em; width: 20em }
#box2 { background: …推荐指数
解决办法
查看次数
如何与相对位置重叠div
我希望将几个div放在每个旁边的一行中,但也允许它们与前一个div重叠.
我想要得到的是一个时间线,有一定长度的事件的div.事件可以相互重叠.
我的想法是给每个div提供相同的顶部位置,增加的z指数和增加的左侧位置(根据事件的时间)稍后我会通过鼠标悬停事件弹出单个div以显示重叠.
我得到的是每个div都放在下一个div下面.通过摆弄top属性,我可以让它们水平对齐.但我没有看到这种模式.
<div class="day">
<div style="top: 35px; left: 200px; background-color: red; height: 50px; width:24px; z-index: 1; position: relative;"> </div>
<div style="top: 35px; left: 220px; background-color: green; height: 50px; width:24px; z-index: 2; position: relative;"> </div>
<div style="top: 35px; left: 225px; background-color: blue; height: 50px; width:48px; z-index: 3; position: relative;"> </div>
</div>
如果我使用绝对位置,元素会飞出周围的div,并且绝对位于页面的某个位置.
推荐指数
解决办法
查看次数
覆盖没有绝对位置的Div
以下是一个很长的解释,但这是有效传达我正试图解决的问题的唯一方法......
我(有点绝望,并且完全没有成功)尝试在不使用绝对定位的情况下覆盖div.需求源于我通过Javascript放置在网站上的paypal购物车.购物车的自然位置很难对网页的上边距(不包含div,即#wpPayPal,或者这个div的包装,#main).
该剧本的作者强烈建议不要自定义购物车的样式表,但我找到了他编写的教程,可以将购物车插入占位符div,并且容器的定位说明有效 - 我能够将购物车放在网站的顶部横幅下方部分.然而...
购物车的HTML表单和每个元素中的ul元素都在购物车的样式表中有高度要求,这推送了页面的主要内容,由容器div #imageWrapper包装,在页面下方太远是可以接受的.
我尝试将#imageWrapper置于#main上,并从本网站的帖子收集了一些想法,但没有成功.我已经尝试在#imageWrapper上进行绝对定位,但这会让页脚浮动到下面.#imageWrapper的高度是可变的,因此我不想将页脚高度保持在适当的位置,因为防止重叠的最小高度会将页脚向下推得太远而无法访问网站的大部分内容.
我也试过拉动位置:相对于购物车形式的CSS,但购物车立即浮动回到网页的顶部.保证金,保证金等等,不能解决这个问题.
然后我读了一篇关于使用position:relative和z-index来叠加div的文章.试过这个,首先把z-index:-1放在#main(包裹paypal购物车的div)上,但购物车消失了.不知道它在哪里,因为该网站的痕迹导航也被#main包裹,仍然存在.
然后我将main的z-index设置为0并应用位置:相对于#imageWrapper,z-index:100.购物车重新出现,但仍然保持#imageWrapper.
建议非常欢迎.我不是任何想象力的界面人,只是一个知道如何使用谷歌的人,所以提前感谢清楚明确表达你的决议:)另外,仅供参考,我现在有购物车的最小高度要求将form设置为0,并将UL元素设置为height:auto.由于购物车中只有一个商品,这使得#imageWrapper可以向上移动页面足够可接受,但这不是一个可行的长期解决方案.
这是一个示例页面 - 要查看购物车,请使用主图像下方显示的下拉列表添加项目.在扩展状态下,您将看到#imageWrapper如何对抗它.
我在下面列出了部分违规HTML/CSS:
<div id="main">
<div id="wpPayPal">
</div><!--end wpPayPal-->
<div id="breadcrumbs">
<span class="B_crumbBox"><span class="B_firstCrumb"><a class="B_homeCrumb" href="/">home</a></span> »</span></span>
</div> <!--end breadcrumbs -->
</div><!-- end Main -->
<div id="imageWrapper">
<div id="imageInnerWrapper">
<div id="featureImage">
<div class="filename"><h1>~ Bryce Canyon Sunrise | Bryce Canyon | Utah ~</h1>
</div><!--end filename-->
等等...
#main {
display: inline;
position: relative;
z-index: 0;
}
#imageWrapper {
clear: both;
width: …推荐指数
解决办法
查看次数
你如何在WPF中做相对定位？
你如何在WPF中相对定位元素？标准模型是使用布局管理器来处理所有事情,但是如果你想简单地根据其他元素的位置定位元素(例如在Canvas上)呢？
例如,您可能希望将一个元素(例如按钮)附加到另一个元素(可能是面板)的一侧,而与该面板的位置或布局无关.任何使用过工程工具(SolidWorks,AutoCad等)的人都熟悉这种相对定位.
将所有内容强制转换为布局管理器(不同的WPF面板)对于某些场景没有多大意义,在这些场景中,您并不关心某些父容器是否维护了这些元素,并且您不希望其他子项受到更改的影响.彼此的布局/外观.WPF是否以任何方式支持这种相对定位模型？
推荐指数
解决办法
查看次数
CSS div 100%高度
我正在开发这个网站,我希望右侧边栏有100%的高度.
body {
height: 100%;
min-height: 100%;
position: relative;
}
mydiv {
height: 100%;
min-height: 100%;
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 290px;
}
我已经阅读了很多答案,特别是这个(Prestaul答案): 当内容超出窗口大小时,在绝对定位的元素上设置100%的高度.
但对我来说这个技巧不起作用,小提琴例子也不起作用!
推荐指数
解决办法
查看次数