标签: css-position
固定页脚处的浮动元素停止
我已经使用http://jqueryfordesigners.com/fixed-floating-elements中的代码在滚动到某一点后浮动一个元素.这是我正在研究的网站:http://bodyecology.com/articles/gut-type-update
如您所见,右列在滚动时变为固定,但在页脚处重叠.如何让它停在页脚上方？
目前使用:
<script>
jQuery(document).ready(function () {
var top = jQuery('#news_sidebar').offset().top - parseFloat(jQuery('#news_sidebar').css('marginTop').replace(/auto/, 0));
jQuery(window).scroll(function (event) {
var y = jQuery(this).scrollTop();
if (y >= top) {
jQuery('#news_sidebar').addClass('fixed');
} else {
jQuery('#news_sidebar').removeClass('fixed');
}
});
});
</script>
推荐指数
解决办法
查看次数
如何使用C#在word 2007文档中的特定坐标处插入图片/文本标签？
我可以这样做,在默认位置插入图片和文字:
private static object objTrue = true;
private static object objFalse = false;
private static object objMissing = Missing.Value;
private static object objEndOfDoc = @"\endofdoc"; // \endofdoc is a predefined bookmark.
...
this.WordApp = new Word.Application();
this.WordDoc = new Word.Document();
this.WordApp.Visible = true;
this.WordDoc = this.WordApp.Documents.Add(ref objMissing, ref objMissing, ref objMissing, ref objMissing);
this.WordDoc.Content.InlineShapes.AddPicture(
FileName: @"C:\MyLogo.png",
LinkToFile: ref objMissing,
SaveWithDocument: ref objTrue,
Range: objMissing);
// Insert a paragraph at the beginning of the document.
var paragraph1 = this.WordDoc.Content.Paragraphs.Add(ref objMissing);
paragraph1.Range.Text …推荐指数
解决办法
查看次数
FancyBox在页面上打开太低
我在我的页面上使用FancyBox,偶尔(但并非总是如此),灯箱在页面下方打开太远,在底部被切断并让您向下滚动以查看其余部分.通常,它将位于页面的死点.
我设置它的位置fixed在onStart的时候我把它法,而且大部分时间确实在中心开放像它应该-所以我不知道是什么导致它抛出了,但只是偶尔.
该网站是Raditaz.com:播放现有电台(或创建自己的电台 - 您不需要帐户),然后点击中间的专辑封面打开灯箱.
任何领导都将不胜感激 - 谢谢!
编辑:一些更新......
- 如果我打开FancyBox后调整窗口大小,它将在中心正确地重新定位(但直到我关闭并再次重新打开它,此时它将再次移动得太低)
- WebKit浏览器(Safari和Chrome)中最常出现错误定位
编辑2:我应该指出我们使用的Fancybox的版本是1.3.4,而不是更新的2.0.我们的jQuery版本是1.6.4.使用Fancybox 2.0可能会解决问题,但(我认为)需要jQuery 1.7,这与我们正在使用的其他一些插件不兼容.所以我更喜欢一个适用于Fancybox 1.3.4的修复程序.
推荐指数
解决办法
查看次数
块内的绝对定位div,位置:固定和滚动条
我有一个div position: fixed,其中包含两个其他div:一个带内容,另一个必须始终位于主div的底部.
这是一个例子:
.scroller {
position: fixed;
border: 1px solid #ddd;
width: 240px;
height: 100px;
top: 0;
bottom: 0;
overflow: auto;
}
.footer {
position: absolute;
bottom: 0;
}<div class="scroller">
<div class="content">
<div>content</div><div>content</div><div>content</div><div>content</div>
<div>content</div><div>content</div><div>content</div><div>content</div>
<div>content</div><div>content</div><div>content</div><div>content</div>
</div>
<div class="footer">FOOTER</div>
</div>问题是当用户滚动主块的内容时,页脚开始与其他内容一起移动,尽管位置:页脚块的绝对值.
有没有办法在不更改html结构的情况下将页脚粘贴到主固定块的底部？
如果主要div包含许多孩子,并且只有最后一个是我们需要坚持到底部的页脚呢？例:
.scroller {
position: fixed;
border: 1px solid #ddd;
width: 240px;
height: 100px;
top: 0;
bottom: 0;
overflow: auto;
}
.footer {
position: absolute;
bottom: 0;
}<div class="scroller">
<div class="content">
<div>content</div><div>content</div><div>content</div><div>content</div>
</div>
<div class="content">
<div>content</div><div>content</div><div>content</div><div>content</div> …推荐指数
解决办法
查看次数
表格单元格中的css绝对位置:奇怪的Firefox显示
我有一个简单的水平菜单,有两个级别.此菜单延伸至包装纸的100%宽度.这是小提琴:http://jsfiddle.net/gpsgv/
如果您在除Firefox之外的任何浏览器中运行此小提琴,它将按预期显示以下内容:
如果你在Firefox中运行这个小提琴,它会显示以下内容:
查看代码,第二级列表绝对位于第一级项目(具有display: relative样式)内.因此,将left: 10px样式设置为第二级列表应该将其定位为距离其相对定位的祖先的左侧10px.同样的top: 30px.但是在Firefox中,它将它定位在左侧和顶部我不知道是什么,也许是身体？
我的问题是,是否有任何解决方案可以在Firefox中正确显示,而无需更改HTML？
PS我用,display: table-cell因为菜单必须沿100%容器宽度均匀分布.
推荐指数
解决办法
查看次数
CSS定位和CSS边距之间的区别
今天我在CSS中学习了2个概念,一个是CSS定位(静态,相对,绝对,固定),另一个是CSS Margin,它定义了元素之间的空间.
假设我想移动一个元素,这是最好的方法吗？因为这两个概念似乎都可以做同样的事情.一个例子可能如下:
代码(CSS定位):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Haha</title>
<style type="text/css">
//Using CSS positioning
h2{position:relative;top:-80px}
</style>
</head>
<body>
<h1>hahahaha</h1>
<h2>hehehehe</h2>
</body>
</html>
守则(CSS保证金):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Haha</title>
<style type="text/css">
//Using CSS Margin
h2{margin-top:-80px}
</style>
</head>
<body>
<h1>hahahaha</h1>
<h2>hehehehe</h2>
</body>
</html>
问题:
1.)正如你所看到的,通过将第二个标题移动到第一个标题的顶部,上面的2个代码做了同样的事情.所以我只是想知道哪种方法实际上是排列元素的正确方法？
推荐指数
解决办法
查看次数
如何仅使用CSS自动将绝对元素置于相对父级内
我看到有关于这个主题的帖子,但没有一个专门回答我的问题
http://jsfiddle.net/27van/显示了如何水平居中文本.
我想在父div中垂直居中,而不使用div设置固定数量的像素(我需要它是动态的)
有线索吗？
.parent_div {
position: relative;
text-align: center;
}
.child_div {
position: absolute;
width: 100%;
top: 70px;
}推荐指数
解决办法
查看次数
如何在按钮上方设置<Span>,可点击(如按钮)？
我希望"eye"图标一方面显示为现在(在按钮上方,所以我认为z-index不会有帮助),另一方面我希望按钮可以点击它的表面,也意味着在眼睛区域.
另外,有更好的方法来定位眼睛吗？因为一旦我使用不同的文字然后"点击我",我将不得不相应地设置眼睛的绝对位置.有什么办法更好地定义它？
<form action="1.php" method="POST" target="_blank">
<input type="submit" class="button" value="Click Me"><span class="fa fa-eye fa-lg foo" "></span>
</form>
.foo{
color:red;
font-size:1.7em;
position: absolute;
height: 11px;
top: 18px;
left: 15px;
pointer-events: none;
}
.button {
display: inline-block;
zoom: 1;
line-height: normal;
white-space: nowrap;
vertical-align: baseline;
text-align: center;
cursor: pointer;
-webkit-user-drag: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
font-family: inherit;
font-family: arial;
font-size: 17px;
padding: .5em .9em .5em 2em;
text-decoration: none;
border-radius: 4px;
text-shadow: 0 1px 1px rgba(0, 0, 0, …推荐指数
解决办法
查看次数
放置位置：固定的行为，例如粘性（对于Vue2）
Position: sticky大多数移动浏览器都不支持。但这position: fixed不是我需要的东西（因为固定块与文档底部的内容重叠）。
我猜对于jquery，如果我们到达文档滚动底部，将很容易为固定块设置静态位置。
但是对于Vue2，我不知道该怎么做。请给一些建议。也许存在更好的解决方案。
推荐指数
解决办法
查看次数
纯CSS的多个堆叠位置是否粘滞？
在纯CSS中是否可以将多个粘性元素彼此堆叠？
可以在此处看到所需的行为：https : //webthemez.com/demo/sticky-multi-header-scroll/index.html
只有我更喜欢使用纯CSS，而不是Javascript实现。我已经对多个粘性元素进行了一些实验，但是不能阻止它们推出其他粘性元素。我试过将它们放在相同的堆栈上下文中：
#sticky .sticky-1,
#sticky .sticky-2
{
position: sticky;
}
#sticky .sticky-1
{
top: 1em;
z-index: 1;
}
#sticky .sticky-2
{
top: 2em;
z-index: 1;
}
但是无法正常工作，如下所示。任何见解将不胜感激！
#sticky .sticky-1,
#sticky .sticky-2
{
position: sticky;
}
#sticky .sticky-1
{
top: 1em;
z-index: 1;
}
#sticky .sticky-2
{
top: 2em;
z-index: 1;
}
<div id="container">
<article id="sticky">
<header>
</header>
<main><h1 class="sticky-1">Sticky heading</h1>
<p>here. Some copy goes here. Some copy goes here. Some copy goes here. Some copy goes …推荐指数
解决办法
查看次数