css - 如何将元素相对于正文固定但超出页面流？

Question

我真的不是前端开发人员，但是

• 我需要创建一个元素（如下图红色所示）
• 相对于页面保持不变（如线条所示，因此当我更改窗口比例时，它基本上保持在页面上的同一位置）
• 但是超出了页面其余部分的流程（因此以“现金管理”开头的字段集位于“投资杂志”标题下）

请问我该怎么做？

Answer 1

可能有几种方法可以做到这一点，但这里有一些适合您的方法。

使用浮点数的选项 1：

将主要内容和红色侧块视为两列。将它们都浮动，给它们一个宽度并将它们放入容器中。

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; }

见小提琴：http: //jsfiddle.net/sntmW/

使用定位的选项2：

绝对定位红色块以将其准确放置在您想要的位置。

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; }

见小提琴：http: //jsfiddle.net/CHr7A/