我真的不是前端开发人员,但是
- 我需要创建一个元素(下面用红色表示)
- 相对于页面保持不变(如线条所示,因此当我更改窗口比例时,它基本上保持在页面上的相同位置)
- 但超出了页面其余部分的流程(因此以“现金管理”开头的字段集位于“投资杂志”标题下)
请问我该怎么做?
最佳答案
可能有几种方法可以做到这一点,但这里有两种方法适合您。
选项 1 使用 float :
将主要内容和红色边 block 视为两列。 float 它们,给它们一个宽度并将它们放入容器中。
HTML
<div class="row">
<section>
<h1>Investing Magazine</h1>
<p>Your content here</p>
</section>
<aside>
<p>The side block here</p>
</aside>
</div>
CSS
.row:before, .row:after {
content: " ";
display: table;
line-height: 0; }
.row:after { clear: both; }
.row { *zoom: 1; }
section {
float: left;
width: 80%; }
aside {
float: left;
width:20%;
background: red; }
参见 fiddle :http://jsfiddle.net/sntmW/
使用定位的选项 2:
绝对定位红色方 block ,准确放置在你想要的位置。
HTML
<section>
<h1>Investing Magazine</h1>
<p>Your content here</p>
</section>
<aside>
<p>The side block here</p>
</aside>
CSS
section { width: 80%; }
aside {
position: absolute;
width:20%;
top:0; right:0;
background: red; }
参见 fiddle :http://jsfiddle.net/CHr7A/
关于css - 如何相对于主体固定元素但不在页面流中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18529208/