Question

Can we change the position of anchor tag which is active and inactive based on screen size using css?

    <div id="status-buttons" class="text-center">
                  <a ui-sref-active="active" ui-sref=".profile"><span>1</span> Profile</a>
                  <a ui-sref-active="active" ui-sref=".interests"><span>2</span> Interests</a>
                  <a ui-sref-active="active" ui-sref=".payment"><span>3</span> Payment</a>
              </div>
          </div>
     <div class="mydiv">
              <h2>Let's Be Friends</h2>
    </div>
    CSS:
    @media only screen 
    and (max-width : 840px) {
      #status-buttons a.active {
        margin-top:500px;
      }
.mydiv{
margin-top:10px;
}

  /* Styles */
}...

我希望mydiv类在该特定链接处于活动状态时位于该标记之上，例如，如果配置文件链接处于活动状态我想改变mydiv类的位置，这里位置意味着不固定，相对等...我想要改变边缘顶部，边缘左边等。

Answer 1

您的问题缺少一些细节，可以给您一个非常详细的答案。 position: fixed可能有效

[...]将其放置在相对于屏幕视口的指定位置，滚动时不要移动它。（https://developer.mozilla.org/en/docs/Web/CSS/position?v=control）

但position不适用于<a>等内联元素，因此您需要定位周围的容器或将其自身设置为display: block。然后，位置将根据屏幕大小而变化。此外，position: relative可能与视口单元一起使用（vw / vh代表视口高度/视口宽度）。

根据屏幕大小更改css元素的位置

1 个答案: