我正在这个网站上工作:http://waterwing.waterwing.ca/
右上角的动画是完美的,除了它创建一个水平滚动条与它的位置.
它绝对定位于-120px的顶部和右侧.我只是想知道我是如何做到的,所以它不会扩展身体,一旦它碰到页面的边缘就会隐藏自己,这样就没有滚动条了.
滚动条似乎不在Windows Firefox上,但在Mac Firefox和Safari上有.
谢谢,韦德
我问过一个关于绝对和相对div定位的早期问题,但我想尝试理解(肯定)float在这种情况下的作用.
我的主要问题是:如何float涉及到absolute和relative div定位是什么？
以下陈述是否正确(是/否):
float right(或left)将尝试div从right(或left)开始堆叠所有一个.如果没有足够的空间(width问题),divs将显示在下一个"行"(从上到下).float不会影响absolute div,absolute覆盖floatrelative div相对于第一个封闭位置relative div(absolute divs被忽略)float right(或left)在div遗嘱上首先计算a 的自然位置relative div,然后添加任何左上角偏移量来计算最终位置.谢谢.
我有以下HTML:
<div class="top">
<div class="header title">Some Big Header Goes Here</div>
<div class="sub-header title">The fancyness enters here.</div>
<a href="#">A random link</a>
</div>
使用以下类进行样式化:
.header {
padding:2%;
}
.sub-header {
font-size:120%;
font-style:italic;
}
.title {
font-size:158%;
line-height:80%;
}
.top {
display:block;
text-align:center;
border:1px solid lime;
padding:1%;
}
.top a {
/*color:red;*/ /* This works but I don't want this */
padding:100000px; /* This does not work, nor do smaller values */
margin:-999999px; /* This does nothing. */
}
如何设置锚链接以定位它只需要一点填充和边距,以便距离上面的两个标题稍微远一点？
我的页面顶部有标题,左侧是侧边栏,右侧是主要内容区域.可以在http://jsbin.com/iqibew/3上看到简化版本.
侧边栏具有样式,position: fixed因此它不会与页面的其余部分一起滚动.这有效,但如果内容太长而无法适应,我还需要侧边栏本身滚动.
只有在我可以为侧边栏设置正确的高度时才可以这样做.但我找不到任何方法来设定这个高度.100%接近,但它太高了,因为侧边栏从标题下面开始.
没有办法解决这个问题.我对CSS或JavaScript/jQuery解决方案持开放态度.
我有一个固定定位的flexslider网页.我使用以下代码来制作flexslider固定位置并添加滑块作为背景.
.flexslider {
display: block;
position: fixed;
left: 0;
top: 0;
overflow: hidden;
height: 100%;
width: 100%;
z-index: -1;
border: none;
}
并且网页具有粘性导航,当用户滚动到视口高度的一半的顶部高度时,该导航变得固定.我通过使用以下jQuery和CSS来做到这一点:
jQuery的:
$(window).scroll(function() {
var scrollTop = $(window).height()/2;
if ($(window).scrollTop() >= scrollTop) {
$('.main-header').removeClass('main-header ').addClass('fixed-header');
}
if ($(window).scrollTop() < scrollTop) {
$('.fixed-header').removeClass('fixed-header').addClass('main-header ');
}
})
CSS:
.fixed-header {
position: fixed;
top: 0;
left: 0;
}
我的HTML标记是:
<div class="flexslider">
<ul class="slides">
<li>
<img src="images/image1.jpg" />
</li>
<li>
<img src="images/image2.jpg" />
</li>
<li>
<img src="images/image3.jpg" />
</li>
</ul>
</div>
<header …编辑：添加：http : //jsfiddle.net/bfNzH/1/
我的HTML的结构如下：
<body>
<div class="wrapper">
<div class="left">left bar</div>
<div class="right">
<div class="topbar">topbar</div>
<div class="header">header</div>
<div class="content">
<div>..some stuff</div>
<table>
<thead>
<tr>
<th class="th1">Col1</th>
<th>Col2</th>
<th>Col3</th>
<th>Col4</th>
</tr>
</thead>
<tbody></tbody>
</table>
</div>
</div>
</div>
</body>
的CSS
body {
height : 100%;
}
.wrapper {
position : absolute;
top : 0;
bottom : 0;
left : 0;
right : 0;
overflow : hidden;
}
.left {
height : 100%;
position : absolute;
width : 50px;
overflow : hidden; …我希望有一个覆盖整个页面的div,即使内容必须滚动.
典型的方法是使用绝对定位的div,同时在html和body上设置100%的高度.
但是,如果页面上的其他内容长于屏幕上的内容,则我的100%高度div仅覆盖窗口的可见区域,并且在页面结束之前不会一直延伸.
示例:http://jsbin.com/wuqezaceteme/1/
CSS:
body, html {
margin:0;
padding:0;
height:100%;
width:100%;
}
body {
position:relative;
}
.wrapper {
position:absolute; /* can't use fixed */
background:yellow;
height:100%;
width:100%;
top:0;
left:0;
}
.box {
height:2200px;
}
HTML:
<div class="wrapper">
Scroll down (yellow box does not go to bottom when scrolling)
</div>
<div class="box">box</div>
</body>
我需要你的帮助!一直在寻找解决方案,但找不到一个,所以我想我应该问一下.
对于一个学校项目,我需要将一个随机数量的大厅放在地图上的正确位置.作为一个例子,我只使用了4个大厅,刚刚硬编码了所有从带有Angular的JSON中恢复的信息,如您在此CodePen中所见
<div class="hall" id="hall01" style="width:15%; padding-bottom:50%; left:00%; top:00%; background-color:red;"></div>
<div class="hall" id="hall02" style="width:85%; padding-bottom:20%; left:15%; top:00%; background-color:green;"></div>
<div class="hall" id="hall03" style="width:15%; padding-bottom:10%; left:85%; top:40%; background-color:yellow;"></div>
<div class="hall" id="hall04" style="width:85%; padding-bottom:20%; left:15%; top:60%; background-color:blue;"></div>
当页面调整大小时,我已经解决了调整大厅大小的问题.剩下的唯一问题是顶部的绝对定位不能像它应该的那样工作.
一切都是以1000px的宽度和500px的高度计算的,但如果浏览器也调整大小,它应该全部调整大小.
让父母调整到正确的高度也是我努力的事情.有人可以帮我这个吗？
我正在尝试设计一个具有粘性thead和粘性行标题的表.所以,基本上,所有th元素都必须是粘性的.
我偶然发现了position: stickycss3属性,它似乎是这项工作的一个很好的候选人,即使它在许多浏览器中尚未得到支持(这对我来说不是问题).但MDN文档说:
'position:sticky'对表元素的影响与'position:relative'相同.
考虑到这一点,我已经构建了一个在Safari 10.0中工作的基本示例,即使粘性元素的边界不守恒.
在Firefox 50.0中,边框得不到显示但标题不粘.
所以,我的问题是:如何通过使用来干净利落地实现这个固定的头部定位position: sticky.似乎实现(实现时)不完整,表格支持更少.
如果不可能的话,我也会接受JavaScript中的解决方案来实现这一目标(但是由于我的整个应用程序都处于反应状态,因此将jQuery添加到我的堆栈中会非常麻烦).
这是我现在拥有的代码片段.请注意,为了获得一些粘性标题,您基本上需要safari或alpha版本的chrome.
div#container {
height: 200px;
width: 300px;
overflow: auto;
}
table {
border-collapse: collapse;
}
tbody th {
position: -webkit-sticky;
position: sticky;
left: 0px;
}
thead {
position: -webkit-sticky;
position: sticky;
top: 0px;
}
th {
background: #B8C1C8;
border: 2px solid black;
}<div id="container">
<table>
<thead>
<tr>
<th>hehe</th>
<th>hello</th>
<th>world</th>
<th>hello</th>
<th>world</th>
<th>hello</th>
<th>world</th>
<th>hello</th>
<th>world</th>
<th>hello</th>
<th>world</th>
</tr>
</thead> …根据我的发现，translate()似乎可以提供比普通动画更平滑的动画，top/left但是我的问题与我最近看到的CSS布局有关。作者使用以下设置将文本块放置在主标题图像内：
.hero-text-box {
position: absolute;
width: 1140px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
他没有解释，而我只想知道，相对于纯布局（即没有动画），百分比值translate()有什么优势top/left？我猜想这对于版面确实没有关系，这是作者习惯的结果。但是即使如此，这也将top/left和相结合translate()。这是怎么回事？
css-position ×10
css ×7
html ×4
css3 ×2
jquery ×2
absolute ×1
anchor ×1
css-float ×1
flexslider ×1
html-table ×1
javascript ×1
overflow ×1
position ×1
sticky ×1