当我移动页面时,如何让我的<div>保持在一个位置

时间:2017-10-20 20:03:33

标签: html css

我一直在努力,我不能让这个留下来:

<marquee>
  <p>
    <div class="scroll-left" id="page" position="fixed" left="0" right="0" top="0" height="83px">
      This is made by an organization
      <br />
      <strong>DO NOT COPY!</strong>
      <br />
      <hr />
    </div>
  </p>
</marquee>

4 个答案:

答案 0 :(得分:2)

使用marquee标记不是标准。 https://developer.mozilla.org/en-US/docs/Web/HTML/Element/marquee

另外,我会避免使用p标记包装div,因为它在语义上不正确,并且应该只包含内联元素。

我会将样式与div标签分开。并做这样的事情: https://jsfiddle.net/Mehdikit/bs9shwt0/

HTML&amp; CSS

&#13;
&#13;
.container {
  position: relative;
  height: 2000px;
}

.scroll-left {
  position: fixed;
  right: 0;
  top: 0;
  height: 83px;
}
&#13;
<div class="container">
  <div class="scroll-left" id="page">
    <p>This is made by an organization </p>
    <br />
    <strong>DO NOT COPY!</strong>
    <br />
    <hr />
  </div>
</div>
&#13;
&#13;
&#13;

请注意,为了示例的目的,我将高度设置为2000px,因此我们可以滚动:)

我希望这会有所帮助。

答案 1 :(得分:1)

查看以下代码。

&#13;
&#13;
#page {
  position: fixed;
}
&#13;
<marquee  id="page">
    <p >
        <div class="scroll-left" right="0" top="0" height"83px">
            This is made by an organization
            <br />
            <hr>
            <strong>DO NOT COPY!</strong>
            
        </div>
    </p>
</marquee>


    <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
            <br />
&#13;
&#13;
&#13;

答案 2 :(得分:1)

您将要将该div设为固定位置,并使用top,left,right和/或bottom属性设置位置。这些属性是样式属性。

确保给该div一个高度和一个宽度。我在代码中看不到宽度。

在CSS中你应该有这样的东西:

#page {
  position: fixed;
  right: 0;
  top: 0;
}

我希望有帮助

答案 3 :(得分:0)

而不是position="fixed"使用style="position:fixed;"

position是一个css属性,而不是一个html属性。

    <marquee>
        <p>
            <div class="scroll-left" id="page" style="position:fixed;right:0;top:0;height:83px;">
                This is made by an organization
                <br />
                <strong>DO NOT COPY!</strong>
                <br />
                <hr />
            </div>
        </p>
    </marquee>