“位置：固定”的对立面是什么 - CSS答案

【问题标题】：What is the Opposite of "position:fixed" - CSS“位置：固定”的对立面是什么 - CSS
【发布时间】：2017-05-24 21:37:37
【问题描述】：

我正在使用 Css，但我不知道 "position:fixed" 的反义词是什么？

CSS：

position:fixed

【问题讨论】：

你想达到什么目的？
没有“对立面”最接近的对立面是position:relative;
对面是什么意思？如果您想“取消”位置：固定，请执行位置：静态
尝试谷歌搜索“css定位”并阅读它！这对你很有帮助。那你可以试试“css定位示例”的实例……
“245”的反义词是什么？

标签： css

【解决方案1】：

position:static;、position:absolute; 和 position:relative; 是 position:fixed; 的替代品。没有明确的对立面，因为 relative、absolute、static 和 fixed 具有不同的属性以表现不同。

看看这篇文章：

http://css-tricks.com/absolute-relative-fixed-positioining-how-do-they-differ/

【讨论】：

【解决方案2】：

“默认值：静态”（似乎与固定相反，因为它显示放置位置并随内容滚动）

position: static;

您可能应该编辑您的问题并使用“which are the alternatives of position: fixed”！

【讨论】：

【解决方案3】：

这些是 CSS 中位置的其他属性

position:static
position:absolute
position:relative
position:inherit

【讨论】：

和位置：继承

【解决方案4】：

我相信position: sticky 将是最接近的对立面，因为position: fixed 元素相对于视口保持在一个位置，并且不会更改它们的position。然而，粘性元素会改变它们相对于视口的位置，同时也会动态改变它们的postion。

【讨论】：

【解决方案5】：

假设我们有两个元素

<div class="sidenav col-sm-3"></div>
<div class="main-content col-sm-9"></div>

对于那些假设添加附加以便sidenav / sidebar元素忘记它的人来说，这只会让事情变得很痛苦。你不需要使用附加的插件，当然也不需要按照我的想法写一个 jquery 插件来切换 sidenav 元素类。

解决方案很简单，它只是围绕媒体查询和一个非常小的 css 更改（我知道的）。在我的示例中，我希望我的 sidenav 元素不会在高于移动屏幕的任何内容上滚动，因此简单的解决方案是添加这两个媒体查询。

/* On small screens, set height to 'auto' for sidenav and grid
================================================================================= */
@media screen and (max-width: 767px) {
  .sidenav {

    height: auto;
    padding: 15px;
  }
  div.sidenav.col-sm-3{
        position:static;

  } 

}

/* On Larger Screens
================================================================================= */

    @media screen and (min-width: 1200px) {

        div.sidenav.col-sm-3{
            position:fixed;

        } 

    }

简而言之，我只是添加了两个媒体查询来解决问题。我们都想得太复杂了。好吧，我们中的任何人以前都没有尝试过。

我添加的第一个查询是告诉所有更大屏幕的设备我想将我的 sidenav 元素的位置固定到左侧并防止它滚动。我通过使用“固定”值将位置属性添加到查询中来实现这一点。

第二个查询只是将移动设备的此属性值重置为“静态”。对于任何不知道任何定位元素的默认值的人来说都是静态的。

检查代码并随意调整屏幕尺寸，但它对我有用。享受你的周末小伙子们。数字hi-5

仅供参考，如果这对您不起作用，那么您可能会体验到我第一次做的事情，并让您的 css 更有资格。例如，不要只将样式设置为 .classname{position:fixed;} 而是使用特异性规则和类似 firefoxes firebug 工具的东西。单击元素（如果您也需要）并根据需要完全限定您的css，例如

而不是这个 .sidenav{position:fixed} 这样做 div.sidenav.col-sm-3{position:fixed}

在您的示例中，您可能需要指定更多或更少，每个人的标记都会有所不同:)

【讨论】：