标签: fixed

我很难像我想要的那样设计我的布局样式.我有一个内容区域#content(示例图像中可以看到的灰色),里面有一个黄色元素.这个div是position:static;height:100%;.现在我也有一个#left-paneldiv position:fixed;height:100%;.问题是,如果内容区域没有足够的空间,则会出现水平滚动条.这将与固定div重叠.对我而言,这完全符合逻辑,但我不知道如何解决这个问题.我的#content元素滚动条应该在窗口的整个宽度上可见.因此,如果面板在视图中,仅减小内容的宽度对我来说不是一个解决方案.

整个CSS:

#content{
    width:100%;
    height:100%;
    background:grey;
}
#left-panel{
    position:fixed;
    top:0;
    left:0;
    width:300px;
    height:100%;
    overflow-y:auto;
}

有人可以用纯CSS帮助我解决这个问题吗？

小提琴:http://jsfiddle.net/a2wn8x5z/1/

我在firefox中发现了背景附件的问题.我想修复我的横幅背景(http://inkerkam.so-use.ru/),但它在firefox中不起作用:显示背景,但它滚动,但是在chrome中它可以正常工作.另一个时刻,在'.content'下面的另一个区块,它也能正常工作.

我的HTML:

    <div class="banner">
    ...
    </div>
...

    <div class="content">
    ....
    </div>

我的css:

.banner {
    background: url(/template/img/banner.jpg) no-repeat fixed left top;
}

.content {
    background: url(/template/img/banner.jpg) 0px -690px fixed;
    padding: 80px 0 120px 0;
}

也许有人知道如何解决这个问题？Firefox版本是最后一个版本.今天更新.

抱歉我的英语不好

我希望这些信息可以帮助在 Chrome 浏览器中使用主题、3D、变换、滑块、动画的项目时遇到“位置：固定”问题的其他人。

问题：以固定位置定位的元素：没有出现在正确的位置，不会爆发，并被锁定在父容器中。

更详细的问题：位置固定的子元素由父元素包含，其属性位置设置为相对并将变换设置为除无以外的任何内容，该子元素使用其父容器并设置属性变换来确定固定位置和不会像预期的那样“爆发”或确定视口的固定位置。

答案由：https ://stackoverflow.com/revisions/15256339/2中的Saml指定

此问题似乎是由于设置了 CSS 变换属性引起的。CSS 变换为该元素的子元素将用于定位的元素创建一个新的局部坐标系。这会导致任何具有 position:fixed 的元素固定到最后一个具有 transform 不等于 none 的元素。

这正是根据 w3 规范假设转换的工作方式，并且它在规范中指定的 chrome 中工作。https://www.w3.org/TR/css-transforms-1/#transform-rendering

这不是错误，您需要删除转换属性或将元素移动到转换元素之外。

有谁知道如何在滚动固定标题上制作多个？我检查答案，如本。

这正是我想要的，但我希望该标题在另一个标题之前停止，并且当第一个标题滚动经过第二个标题时，第二个标题应该占据第一个标题的位置并停留在屏幕的最顶部。但是它们对我不起作用，因为它们使用的是我不使用的库（jQuery 等），而且它们过于复杂。我试过这样做，我getBoundingClientRect()只用 2 个标题就可以使用它。我在这里提供了 HTML&CSS 部分：

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-family: 'Roboto', sans-serif;
}

@import url("https://fonts.googleapis.com/css?family=Roboto:100");

h1 {
  letter-spacing: 3px;
  margin: 0;
  padding-left: 10px;
  padding-top: 10px;
  color: #fff;
  font-weight: 100;
}

.header {
  width: 100%;
  height: 50px;
}

.header:nth-of-type(1){
   background-color: dodgerblue;
    position: fixed;
}

.header:nth-of-type(2){
   background-color: rebeccapurple;
}

.header:nth-of-type(3){
   background-color: chartreuse;
}

.content {
  width: 100%;
  height: 100%;
  background: linear-gradient(70deg, orange, crimson);
  padding-top: 50px;
    
}

<header class="header"><h1>HEADER 1</h1></header> …

我在网上看到有一些position: fixed与 Mobile Safari 相关的错误，但到目前为止我找不到任何解决方案。

我有一个 divoverflow: auto，里面有一个position: fixed元素。在桌面、Android、Chrome 和 Firefox 上，它运行得很好，但当我尝试在 iPhone 上的 Safari 上执行相同操作时，行为完全不同，我的应用程序无法运行。

该position: fixed元素是一个弹出窗口，我希望它占据整个页面。从技术上讲，在 safari 中它确实占据了整个页面，但我只能看到直接位于弹出窗口上方的部分overflow: auto元素上方的弹出窗口的一部分。div 之外的所有内容都是透明的。我说从技术上讲是因为整个弹出窗口仍然位于所有内容之上，但我看不到它。但我仍然可以与它互动。

我尝试使用position: absolute但就我而言，这不是一个可行的选择，因为第一个元素位于另一个位置相对或绝对元素内，并且它不会做同样的事情。

a 可以看到的唯一选项是在显示弹出窗口时更改溢出值，并在关闭弹出窗口时将其更改回来。

有什么我错过的吗？

我在jasperreports中有页脚的问题.我想将页面页脚固定在每页的底部.如果详细信息区域中只有一条记录,则页脚会在页面中间的详细区域后面.我已将页脚中元素的"位置类型"设置为"相对于底部固定".但它不起作用.我无法增加细节带的高度,因为它还会增加每个记录之间的空白.谁能帮我？谢谢!

我真的很感谢任何jquery专家帮助作为我以前使用过的方法,并不适合这个新的应用程序.

我正在努力实现的目标

我的网站包装器的右侧和左侧有两个选项卡,只有在您向下滚动页面时才会显示.当标签到达屏幕中心时,它们将变为固定位置,然后出现锁定位置.看下面的一般效果/想法......

http://jsfiddle.net/motocomdigital/SGCHt/2/

问题

您可能想知道为什么我问这个小提琴是否已经起作用的问题.

上面的小提琴是有效的,因为它适用于从窗口顶部滚动到位置.

但是在我的网站上,这些标签只存在于内容区域,并且无法在我的标题,横幅,幻灯片区域上方运行.

在上面的jsFiddle示例中,您会注意到没有标题,横幅或幻灯片.因此,这对我当前的脚本来说不是问题,因为选项卡容器列一直运行到顶部.

请看下面的小提琴有不同的布局组合,然后你会看到我的问题.

请注意我删除了选项卡容器列上的橙色背景,以便您可以看到设计的观点.

1. 标题,导航,幻灯片,广告 - http://jsfiddle.net/motocomdigital/SGCHt/3/
2. 标题,导航,广告 - http://jsfiddle.net/motocomdigital/SGCHt/4/
3. 标题,导航 - http://jsfiddle.net/motocomdigital/SGCHt/5/

现在看下面的小提琴,它在标签容器列上有橙色背景,这样你就可以看到标签如何只出现在内容区div旁边的结构.

http://jsfiddle.net/motocomdigital/SGCHt/6/

解

该脚本有些如何在屏幕顶部达到50%时将固定位置添加到选项卡.但我不知道如何计算这个,因为标签容器不会一直运行到窗口顶部.是否有另一种实现此目的的脚本方法？

任何帮助都会非常感激.谢谢!

我搜索一种方法来制作像9gag.com这样的粘性图像信息.(http://i.stack.imgur.com/6SuX4.png)

这并不容易,因为当文章位于窗口顶部时需要修复元素.

如果有人知道插件或方法,这将是伟大的:)

提前致谢.

请在这里找到我的设计:http://jsfiddle.net/2JGQa/

我想修复左栏(包括testlab_fr,1er mail,...,10eme mail),就像我的标题一样,我怎么能这样做？

我看到了词缀,但我不知道如何使用它.

<div class="row">
<div class="col-sm-4">
  <div class="row">
    <ul class="list-group">

          <li class="list-group-item">
            <span class="badge">175</span>
            testlab_fr
          </li>    </ul>
  </div>
  <div class="row">

    <div class="list-group">


      <a href="http://localhost/mailbox/testlab_fr,26860-html" class="link_mail list-group-item active">
          <h4 class="list-group-item-heading">1er mail</h4>
          <p class="list-group-item-text">il y a 1 hours</p>
        </a>
      <a href="http://localhost/mailbox/testlab_fr,25877-html" class="link_mail list-group-item">
          <h4 class="list-group-item-heading">10ème mail</h4>
          <p class="list-group-item-text">il y a 2 heures</p>
        </a>    </div>
  </div>
</div><!-- /.col-sm-4 -->

我正在处理的网站有几个div部分,每个部分都是视口的宽度和高度.它们垂直堆叠,每个都具有相对定位(参见Codepen).每个元素内部都是固定位置h1.我希望h1每个元素中的固定仅在其各自的父元素可见时才保持可见.

我已经尝试了一些z-index实验但没有成功.关于下一步尝试的任何想法？