怎样才能既#row1并#row2在下面的代码是可见的,一前一后垂直,仿佛根本没有什么absolute/relative定位参与？
<body>
<div class="container">
<div id="row1" class="row">
<div class="col1">Hello</div>
<div class="col2">World</div>
</div>
<div id="row2" class="row">
<div class="col1">Salut</div>
<div class="col2">le monde</div>
</div>
</div>
body {position:relative;}
.container {position:absolute;}
.row {position:relative;}
.col1, .col2 {position: absolute;}
更新
由于此处排除的原因,我需要在CSS规则中提供定位的元素.所以我的问题是,如果不删除上面的CSS就可以实现我正在寻找的东西？.row div即将两者视为"正常" block元素.
更新2
如果指定了足够的高度px,则结果具有预期的外观.但内容是programmitacacally动态所以我不知道事先的高度:(
我想在默认WordPress主题(http://twentyelevendemo.wordpress.com/)的标题中在照片上方放置一个徽标
我的解决方案:在照片前添加徽标,并position: absolute在其上设置,而不设置任何top/left/bottom/right属性:
HTML:
<a id="header">
<img id="logo">
<img id="photo">
</a>
CSS:
#logo {
position: absolute;
margin: 10px;
/* or padding: 10px; */
/* or border: 10px solid transparent;
only this works with my elderly iPhone Simulator.app */
}
另一个例子是一个100%宽的水平多级菜单display: table-*,但是table-cell不支持position: relative,所以我唯一的解决方案是:http://jsfiddle.net/pCe49/
它适用于IE6-7,Firefox1.5,不适用于Firefox 0.8等.
你认为这是一个很好的解决方案,还是一个非标准的黑客攻击,它可以在任何时候崩溃？
我有这个代码
#mtitle {
display: inline-block;
margin: 0;
background-color: #000000;
z-index: 999;
}
#tsub {
display: inline-block;
margin-left: 0;
left: 0;
position: absolute;
font-size: 85px;
z-index: 0;
}<header>
<h1 id="mtitle">Tepid Beans</h1>
<div id="tsub"><span>- Games</span>
</div>
</header>#tsub出现在的顶部#mtitle，但我不知道为什么。