相关疑难解决方法(0)

我有一个div具有background:transparent,沿border.在此之下div,我有更多的元素.

目前,当我点击叠加层外部时,我可以单击基础元素div.但是,直接单击叠加层时,我无法单击基础元素div.

我想能够点击这个,div这样我就可以点击底层元素.

我发现当我将一个元素定位为固定时,如果父元素相对与否定位无关紧要,它将相对于窗口定位固定？

CSS

#wrapper { width: 300px; background: orange; margin: 0 auto; position: relative; }
#feedback { position: fixed; right: 0; top: 120px; }

HTML

<div id="wrapper">
    ...
    <a id="feedback" href="#">Feedback</a>
</div>

http://jsbin.com/ibesa3

使用Bootstrap,我有一个网格列class ="col-lg-3",我想把它放在适当位置:固定而另一个.col-lg-9是正常位置(可滚动浏览页面).

<div class="row">
    <div class="col-lg-3">
        Fixed content
    </div>
    <div class="col-lg-9">
        Normal scrollable content
    </div>

</div>

就像LifeHacker.com中的左栏一样, 您会看到左侧部分是固定的,但我滚动页面.

我使用bootstrap v3.1.1

很抱歉不得不问另一个position:fixed相关的问题,但阅读各种其他问题和论坛帖子并没有帮助我解决这个问题.

下面的代码简要演示了我迄今为止position:fixed在项目中的使用方式.我最初(错误)的理解position:fixed是它最初修复了相对于第一个定位的父容器,然后无论视口滚动位置如何都保持在该位置.我现在意识到这是错误的:事实上,position:fixed相对于最外面的容器(即html标签)的position:absolute位置和相对于具有不同位置的第一个父容器的位置static.

通过阅读关于SO的各种其他问题,我意识到我试图实现的效果position:fixed是许多其他人尝试过的效果,但后来意识到只用CSS就不可能:也就是说,相对于容器定位一个元素,但是当页面滚动时,它会保持在相对于视口的位置.

令我困惑的是,上面的内容正是我似乎已经实现的 - 至少在FF和IE8上.使用下面的代码示例,"固定的右窗格内容"最初位于红色"中心可滚动内容"框的右侧,并且与中心内容的顶部垂直对齐.中心内容可以滚动,但右手内容保持原样,就好像它最初在正常文档流中静态定位但此后保持固定在视口中.

我现在意识到这似乎在IE8和FF中"工作"只是因为我没有为元素指定top/ bottom/ left/ right属性fixed.如果我这样做,那么我意识到fixed元素会立即相对于视口定位.

我曾经假设 - 也许是危险的 - 直到现在如果没有指定相对位置,那么position:fixed默认情况下将该元素放置在通常静态放置的位置.至少FF和IE8似乎正在这样做.

但是,在Safari中进行测试表明Safari似乎将该fixed元素放在其容器的左侧.换句话说,没有定位,我的position:fixed元素既不是静态放置的位置,也不是相对于视口位于0,0.

到目前为止,我是否一直依赖于定义非常糟糕的行为,我最好是依靠JavaScript解决方案来实现这种固定定位？或者,这种行为是否为IE/FF定义良好; 有人可以解释Safari的位置背后的逻辑吗？

<style type="text/css">
  #content-centre {
    margin: 0 auto;
    width: 900px;
  }
  
  #header {
    height: 55px;
    position: fixed;
    top: 0;
    width: 990px;
  }
  
  #left-pane {
    position: fixed;
    top: 12px;
    border: 1px green solid; …

想像:

<div class="outer">
    <div class="inner">
    </div>
</div>

哪里:

• .outer 是列结构的一部分,它的宽度是百分位数,因此是流动的.
• .inner表示fixed应该填充100%宽度的.outer元素的位置元素.然而,它的位置垂直保持不变fixed.

我试图用以下CSS实现这个布局:

.outer {
    position: relative;
    width: %;
}
.inner {
    position: fixed;
    width: 100%;
}

但是,.inner不会将其宽度计算为relative其父级的百分比.相反,它填充窗口/文档的整个宽度.尝试任何left或right属性会导致相同的父级忽略质量.

有没有办法解决？

我对CSS比较陌生.我遇到了一个问题,我试图修复其父元素旁边的元素.我可以使用以下代码执行此操作:

父元素:

#search_results{
position:relative;
}  

子元素:

.total {
position: fixed;
top:10px;
width:250px;
left: 75%;
/*overflow: hidden;*/
margin-left: -125px;
}

这可以正常工作,直到调整浏览器窗口大小.发生这种情况时,固定元素与其父元素重叠.你可以在这里看到我的问题: Twittiment

我试图将子元素修复到页面的顶部和父元素的右侧.有任何想法吗？

我试图给一个百分比父母的固定元素width(这里#container).当我使用像素而不是百分比时,它的工作原理.我该怎么做？这可能与CSS有关吗？

HTML

<div id="outer">
  <div id="container">
    <div id="fixed">
        Sitename
    </div>               
  </div>
</div>

CSS

#outer{
  width:300px;
  border: 1px solid yellow;   
}

#container {
  width: 90%; /*When I use e.g 250 px it works. But I need it in percentage*/
  border: 1px solid red;
  height: 300px;
}

#fixed {
  position: fixed;
  width: inherit;
  border: 1px solid green;
}

的jsfiddle

加:

我需要position:fixed.因为我想将它放在页面底部,如下所示:

的jsfiddle

解决方案position:relativ对我不起作用.

我正在尝试制作一个粘性标题+第一列表.适用于桌面浏览器.

但是,当我在移动设备上滚动表格的x轴时,位置更新是拖动,即不够快.

我已经阅读了各种推荐iScroll的 SO线程.在这种情况下,我不确定如何正确使用它.应该拦截tbody滚动事件,根据iScroll的事件值来保留默认行为并更新位置？请指出我在正确的方向:)

$(function() {
  var $tbody = $('tbody');

  $tbody.on('scroll', function(e) { 
    var left = $tbody.scrollLeft();
    $('thead').css('left', -left); 
    $('tbody td:nth-child(1), thead th:nth-child(1)').css('left', left);
  });

  var iScroll = new IScroll($tbody[0], { probeType: 3 });
  iScroll.on('scroll', function(){
    console.log('not fired?');
  });
});

https://jsfiddle.net/97r799gr/

要重现此问题,您最简单的方法是在手机上访问https://jsfiddle.net/97r799gr/show.我正在使用SGS7边缘,所以我认为这几乎可以在任何移动设备上重现.

我需要将一个标题定位在包含父项中,以便在滚动时跟随它.问题是

position:fixed

将位置固定到浏览器,而不是父级.这导致的是,当我有一个容器在宽度上有一个水平滚动溢出(内容比容器宽)时,我的固定头没有像表的内容那样的溢出滚动.

看这个小提琴演示

所以这里的目标是修复标题的位置,但相对于它的父容器是固定的.在这个小提琴中,你可以看到我已经注释掉了一块css:

.container{

     /*-webkit-transform: translateZ(0);
     -moz-transform: translateZ(0);
     -ms-transform: translateZ(0);
     transform: translateZ(0);*/

     -webkit-transform: none;
     -moz-transform: none;
     -ms-transform: none;
     transform: none;   
}

如果将当前的css块(变换设置为none)替换为带有translateZ的块,则标题将位于其父容器中,但不再修复.

有谁知道如何解决这个问题？首选的解决方案是CSS/HTML并避免使用JS,但如果没有别的话,那么JS当然是我需要的!

我无法定位,最大宽度和'右:0px'协调工作!我正在创建一个固定在我的网站右上角的div.页面内容的最大宽度为1000px,但标签只遵循我的'right:0px'规则并向右粘,一旦达到最大宽度就不遵守.还应该注意的是,默认情况下,div位于左上角并且服从最大宽度(如果我输入'left:0px;'但是,它不遵守规则并且它坚持左边).

CSS:

#content {
margin: 0 auto;
max-width: 1000px; }

#div {
width: 150px;
position: fixed;
right: 0px; } 

以下是我已经尝试过的一些替代方案:

• 宽度:100%(文字对齐:右)<---不太正确,我不喜欢100%宽度而不是150px
• 添加代码以在html(而不是CSS)中"手动"定位div
• 我发现浮动和文本对齐不会影响固定定位

非常感谢帮助!谢谢.