Question

我在CSS中标记的位置有问题。无论我尝试什么，它仍然在主要部分之下并且不会在顶部（我需要右上角）。无法弄清问题在哪里。求助。

这是问题部分和我的CSS代码

＆＃13;

    .aside {
      position: relative;
      float: right;
      margin: 14px 14px 14px 0px;
      padding-left: 15px;
      clear: left;
      width: 220px;
      background-color: #EAA845;
    }

    .sectionaside {
      padding: 10px;
      margin: 15px 15px 15px 5px;
      background-color: #DF5252;
    }

＆＃13;

<aside class="aside">

          <section class="sectionaside">
            <h4><u>Liked the article?! Stay tuned and find more interesting insights!</u></h4>
          
          </section>

          <section class="sectionaside">
            <h4>Related web sites</h4>
         
          </section>

          <section class="sectionaside">
            <h4>A &quot;must have&quot; skills in 21st century</h4>
            

          </section>

        </aside>


        <footer><u>Contact information</u></footer>

＆＃13;

Answer 1

尝试使用position: absolute（如果它应该相对于<body>放置）或position: fixed（ stick 到窗口）标记{{1} }或top属性

Answer 2

在你的CSS上，你漂浮在.aside下面，需要改为浮动：左;并且在完成浮动元素之后制作clearfix的好习惯。查看附带的代码段以及代码中的更改。希望它有所帮助。

.aside {
  position: relative;
  float: left;
  margin: 14px 14px 14px 0px;
  padding-left: 15px;
  clear: left;
  width: 220px;
  background-color: #EAA845;
}

.sectionaside {
  padding: 10px;
  margin: 15px 15px 15px 5px;
  background-color: #DF5252;
}
.clearfix{
  clear:both;
}

    <aside class="aside">

      <section class="sectionaside">
        <h4><u>Liked the article?! Stay tuned and find more interesting insights!</u></h4>

      </section>

      <section class="sectionaside">
        <h4>Related web sites</h4>

      </section>

      <section class="sectionaside">
        <h4>A &quot;must have&quot; skills in 21st century</h4>


      </section>

    </aside>
    
    <div class="clearfix"></div>

    <footer><u>Contact information</u></footer>

Answer 3

如果您希望aside高于其他所有内容，只需将clear: both;添加到其后的任何元素中 - 在您的特定情况下为页脚，但在现实生活中可能还有其他内容。

如果你真的想要它在右上方的corder中，请删除它的margin设置并将margin: 0;添加到html和body：

html,
body {
  margin: 0;
}

.aside {
  position: relative;
  float: right;
  padding-left: 15px;
  clear: left;
  width: 220px;
  background-color: #EAA845;
}

.sectionaside {
  padding: 10px;
  margin: 15px 15px 15px 5px;
  background-color: #DF5252;
}

footer {
  clear: both;
}

<aside class="aside">

  <section class="sectionaside">
    <h4><u>Liked the article?! Stay tuned and find more interesting insights!</u></h4>

  </section>

  <section class="sectionaside">
    <h4>Related web sites</h4>

  </section>

  <section class="sectionaside">
    <h4>A &quot;must have&quot; skills in 21st century</h4>


  </section>

</aside>


<footer><u>Contact information</u></footer>

不能将标签放在左侧顶部，试过浮动：左/上：0，左：0，其他选项仍然没有

3 个答案: