相关疑难解决方法(0)
"位置:粘;" 不工作的CSS和HTML
一旦我滚动到它,我想让导航栏坚持到顶部,但它不起作用,我不知道为什么.如果可以请求帮助,这是我的HTML和CSS代码:
.nav-selections {
text-transform: uppercase;
letter-spacing: 5px;
font: 18px "lato",sans-serif;
display: inline-block;
text-decoration: none;
color: white;
padding: 18px;
float: right;
margin-left: 50px;
transition: 1.5s;
}
.nav-selections:hover{
transition: 1.5s;
color: black;
}
ul {
background-color: #B79b58;
overflow: auto;
}
li {
list-style-type: none;
}<nav style="position: sticky; position: -webkit-sticky;">
<ul align="left">
<li><a href="#/contact" class="nav-selections" style="margin-right:35px;">Contact</a></li>
<li><a href="#/about" class="nav-selections">About</a></li>
<li><a href="#/products" class="nav-selections">Products</a></li>
<li><a href="#" class="nav-selections">Home</a></li>
</ul>
</nav>推荐指数
解决办法
查看次数
如何使内容显示在固定的DIV元素下？
我的目的是在页面顶部创建一个菜单,即使用户滚动也会保留在页面顶部(例如Gmail的最新功能,其中常用按钮向下滚动,以便用户执行对消息的操作,而不必滚动到页面顶部).
我还想将下面菜单下面的内容设置在它下面 - 目前,它出现在它后面.
我的目标是这样的:
+________________________+
| MENU | <--- Fixed menu - stays at top even when scrolling.
+¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬+
| CONTENT BEGINS |
| HERE |
| |
| |
| |
| |
| |
| |
+¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬¬+ <--- Bottom of page.
我希望顶部的菜单永远不会移动,并且位于页面顶部,即使用户向下滚动也是如此.当用户位于页面顶部时,我也希望主菜单在菜单下面开始,但是当用户向下滚动时,菜单是否超出内容的顶部并不重要.
摘要:
- 我希望页面顶部有一个固定的位置菜单,滚动时跟在用户后面.
- 仅当用户位于页面顶部时,内容才必须显示在菜单下方.
- 当用户向下滚动时,菜单可以与内容重叠.
有人可以解释一下如何实现这个目标吗？
谢谢.
更新:
CSS代码:
#floatingMenu{
clear: both;
position: fixed;
width: 85%;
background-color: #78AB46;
top: 5px;
}
HTML代码:
<div id="floatingMenu">
<a href="http://www.google.com">Test 1</a>
<a href="http://www.google.com">Test 2</a>
<a href="http://www.google.com">Test 3</a>
</div>
目前,我可以将菜单显示在页面顶部,并将其置于我的内部中心container …
推荐指数
解决办法
查看次数
中心图像大于屏幕
我附上了我的页面看起来像的图纸.页面的宽度为980px,图像的宽度几乎为1200px.我想要实现的是让页面居中并尽可能多地显示图像,同时保持图像居中.我试图绝对定位图像,但随后在移动设备上,浏览器页面被设置为图像的宽度,内容不会保持居中.
基本上,可能存在屏幕,其中不向用户显示整个图像,而是仅适合屏幕.
CSS:
.page_container {
width: 980px;
margin: 0 auto;
}
.image {
position: absolute;
left: 0;
right: 0;
}
HTML:
<body>
<div class="page_container">...</div>
<div class="image"><img .../></div>
<div class="page_container">...</div>
</body>
推荐指数
解决办法
查看次数
设置父溢出而不破坏孩子的位置粘性
我正在使用stickyfill在两列设计中粘贴我的一个柱子.我需要我的父母垂直填充而不声明高度.stickyfill检测支持位置的浏览器(firefox,safari):sticky; 并让这些浏览器接管.
我习惯于简单地将父级的溢出设置为隐藏,但在这种情况下,它会破坏位置:粘性; 从工作.
我的解决方案是将父级的display属性设置为table.这是我测试过的,但我想知道这是不是一个坏主意,或者是否有更好的方法来实现我的目标.
示例: JSFiddle
CSS:
.wrapper {
overflow: visible;
display: table;
width: 400px;
}
.left {
float: left;
width: 60%;
height: 1280px;
background-color: #EEE;
}
.right {
overflow: hidden;
position: -webkit-sticky;
position: sticky;
top: 0;
}
HTML:
<div class="wrapper">
<div class="left">Content</div>
<div class="right">Sticky</div>
</div>
推荐指数
解决办法
查看次数