标签: fixed
固定位置但相对于容器
我正在尝试修复它,div所以它总是粘在屏幕的顶部,使用:
position: fixed;
top: 0px;
right: 0px;
但是,div它位于一个居中的容器内.当我使用position:fixed它时,修复了div浏览器窗口的相对位置,例如它在浏览器的右侧.相反,它应该相对于容器固定.
我知道position:absolute可以用来修复相对于它的元素div,但是当你向下滚动页面时,元素会消失,并且不会像上一样粘在顶部position:fixed.
是否有实现此目的的黑客或解决方法？
推荐指数
解决办法
查看次数
粘滞侧边栏:向下滚动时粘到底部,向上滚动时粘到顶部
我一直在寻找一些解决我的粘性侧边栏问题的方法.我有一个特定的想法,我希望它如何行动; 实际上,当你向下滚动时我希望它坚持到底部,然后一旦你向上滚动我想它以流畅的动作(没有跳跃)粘在顶部.我无法找到我想要实现的示例,因此我创建了一个图像,希望能够更清楚地说明这一点:
- 边栏位于标题下方.
- 向下滚动时,侧边栏与页面内容保持同一水平,以便您可以滚动浏览侧边栏和内容.
- 到达侧边栏的底部,侧边栏粘在视口的底部(大多数插件只允许粘到顶部,一些允许粘到底部不允许两者).
- 到达底部,侧边栏位于页脚上方.
- 当您向上滚动时,侧边栏与内容保持一致,因此您可以再次滚动内容和侧边栏.
- 到达侧边栏的顶部,侧边栏会粘到视口的顶部.
- 到达顶部,侧边栏位于标题下方.
我希望这是足够的信息.我已经创建了一个jsfiddle来测试任何插件/脚本,我已经重置了这个问题:http://jsfiddle.net/jslucas/yr9gV/2/ .
推荐指数
解决办法
查看次数
修复了带有水平滚动条和垂直滚动条的标题表
我一直试图用html/css粘贴标题+滚动条来解决这个问题.我们正在创建一个程序,一旦容器大小达到某个点(取决于用户的分辨率),就需要显示滚动条.
我在表格的第二列强制使用最小宽度,因此表格会在某个点停止减小并强制容器保持一定的宽度.容器上的溢出显示水平滚动条.一切正常.一旦我为垂直滚动添加第二个滚动条,事情就变得混乱了.有人有解决这个问题的方法吗？我想在.table-body上有一个垂直滚动条,但滚动条必须在外部容器上可见.
是否有一个很好的html/css解决方案固定标头表？我一直在寻找一周,但只能找到这种行为的jQuery插件.
这是我目前的HTML:
<!DOCTYPE html>
<html>
<head>
<title>fixed header prototyping</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="outer-container"> <!-- absolute positioned container -->
<div class="inner-container">
<div class="table-header">
<table id="headertable" width="100%" cellpadding="0" cellspacing="0">
<thead>
<tr>
<th class="header-cell col1">One</th>
<th class="header-cell col2">Two</th>
<th class="header-cell col3">Three</th>
<th class="header-cell col4">Four</th>
<th class="header-cell col5">Five</th>
</tr>
</thead>
</table>
</div>
<div class="table-body">
<table id="bodytable" width="100%" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td class="body-cell col1">body row1</td>
<td class="body-cell col2">body row2</td>
<td class="body-cell col3">body row2</td>
<td class="body-cell col4">body row2</td>
<td class="body-cell …推荐指数
解决办法
查看次数
带水平滚动的HTML表格(第一列固定)
我一直试图想办法用一个固定的第一列制作一个表(并且表的其余部分有一个水平溢出)我看到一个帖子有一个类似的问题.但固定列位似乎没有得到解决.救命？
推荐指数
解决办法
查看次数
当使用鼠标滚轮滚动时,IE 10和11使固定背景跳跃
在Windows 8中使用鼠标滚轮滚动时,固定的背景图像会像疯了一样反弹.这仅影响IE 10和IE 11.这position:fixed也会影响元素.在IE 10和11中有没有阻止它发生？
这是一个固定背景图像的示例:
推荐指数
解决办法
查看次数
位置固定的父母和孩子,父母溢出:隐藏的bug
我不知道是否有问题,但我想知道为什么overflow:hidden它不能在fixed父/子元素上起作用.
这是一个例子:
CSS和HTML:
.parent{
position:fixed;
overflow:hidden;
width:300px;
height:300px;
background:#555;
}
.children{
position:fixed;
top:200px;
left:200px;
width:150px;
height:150px;
background:#333;
}<div class="parent">
<div class="children">
</div>
</div>现场演示:jsFiddle
推荐指数
解决办法
查看次数
如何在滚动上修复标题
我正在创建一个标题,一旦滚动到一定数量的像素,它就会修复并保持原位.
我可以使用css和html这样做,还是我也需要jquery？
我已经创建了一个演示,所以你可以理解.任何帮助都会很棒!
body{
margin:0px;
padding:0px;
}
.clear{
clear:both;
}
.container{
height:2000px;
}
.cover-photo-container{
width:700px;
height: 348px;
margin-bottom: 20px;
background-color:red;
}
.small-box{
width:163px;
height:100px;
border:1px solid blue;
float:left;
}
.sticky-header{
width:700px;
height:50px;
background:orange;
postion:fixed;
}
推荐指数
解决办法
查看次数
css"固定"子元素相对于父元素的位置而不是视口,为什么？
我正在开发一个带有同位素网格的wordpress主题,并且在帖子上悬停应该在浏览器底部的固定位置显示其标题.我有这个简化的结构:
<div id="main">
<article class="hubbub">
//article content
<h2 class="subtitled">
//h2 content
</h2>
</article>
</div>
通过jQuery,悬停在<article>应该显示其子元素h2.subtitled.<article>相对位置,但通过同位素脚本获得绝对位置.在h2.subtitled被定位固定:
.subtitled {
display: none;
position: fixed;
z-index: 999999999;
bottom: 20px;
left: 0;
width: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 42px;
text-align: center;
color: yellow;
}
由于某种原因,h2.subtitle元素定位固定与父<article>元素相关,因此每个元素的底部<article>.如果我设置了它的<h2>外部<article>,它被定位为与浏览器相关的固定,但它们需要在<article>元素内部,因为无限滚动附加新<article>元素,它们也应该包含<h2>标题.
有谁知道,如何使这个位置固定并与浏览器窗口相关？
谢谢!
推荐指数
解决办法
查看次数
当与css变换结合使用时,固定附件背景图像在铬中闪烁/消失
我目前正在做一个视差网站主题.对于某些'div'和'section,需要将背景图像附加为固定的,以避免jquery沉迷于所有内容.问题是任何动画项目下方标签的背景图像在转换完成时消失,仅在Google Chrome上.补救？
推荐指数
解决办法
查看次数
如何使div具有固定的大小？
我创建了一个网站,所以当你点击按钮30px时它改变了里面的字体div.
我有一个ul带底子的内部.当我改变字体的大小时,div扩展和导航按钮也随之移动.
我如何使它保持固定但字体仍然可以改变.
推荐指数
解决办法
查看次数