标签: css-position
指定上/下/左/右时CSS位置不起作用
为top/bottom/left/right指定大于或小于零的值无效.
创建了一个指定的id position: absolute.我也可以声明位置但只有零值,即top: 0或right: 0.当我指定时,没有任何事情发生right:50.
我无法理解为什么.我几乎从文档中删除了所有内容.
这是CSS:
#index-content {
position:absolute;
top:349;
right:0;
background-color: fuchsia;
}
这是HTML:
<body>
<div id="index-content">The Title</div>
</body>
推荐指数
解决办法
查看次数
光滑滚动,固定导航和iPad 2的问题
我正在为一位朋友开发一个婚礼网站.它使用下面的jQuery在点击导航点时为页面添加"平滑滚动"效果.
我将为iPad和iPhone添加一个自适应布局 - 但他们热衷于尽快推出它,我需要转向邀请!
无论如何,我在iPad上遇到了奇怪的行为 - 因为平滑滚动仅适用于你点击的第一个链接 - 然后没有一个nab链接触发行为/似乎可点击.
我假设这是固定导航的问题 - 但它在我测试过的所有其他(mac)浏览器和我的iPhone上都有效.
该网站在这里
http://www.elandsebswedding.co.uk/main-page/
jQuery在这里:
$("nav ul li a, #logo a").click(function(event){
//prevent the default action for the click event
event.preventDefault();
var full_url = this.href;
var parts = full_url.split("#");
var trgt = parts[1];
var target_offset = $("#"+trgt).offset();
var target_top = target_offset.top;
$('html, body').animate({scrollTop:target_top -130}, 500);
});
任何建议/工作将不胜感激!
推荐指数
解决办法
查看次数
ie7 - 相对定位的div不会在其容器中滚动
我有一个带滚动条的div.在其中,我有各种元素,其中一个是显示链接:块和位置:相对; 这个链接的内部是一个带有默认定位的img,以及一个应该出现在img顶部的h3标签,其位置为:absolute.当我滚动DIV时,其他东西正确滚动,但这些元素及其内容保持不变.关于如何解决这个bug的任何想法？
这是一个小提琴,大约.代码如下:
<a class="slider_link" data-ident="herb-garlic-roast-tenderloin" href="http://superfadlabs.com/clients/carapelli/recipes/herb-garlic-roast-tenderloin">
<img class="slider_image" src="http://superfadlabs.com/clients/carapelli/images/sections/recipes/share_carousel_images/tenderloin.jpg" alt="Herb & Garlic Roast Tenderloin" style="
left: 0px;
top: 0px;
display: block;
">
<h4>Herb & Garlic Roast Tenderloin</h4>
</a>
a.slider_link {
width:190px; height:220px; position: relative; display: block; margin-bottom:10px;
h4{ .cubano; font-size:1.8em; position: absolute; color: #fff; top:11px; left:14px; line-height: 110%; padding-right:10px; height:40px; overflow: hidden; }
}
css internet-explorer scroll css-position internet-explorer-7
推荐指数
解决办法
查看次数
使用绝对定位调整<img />的大小
div＃ipsko更改宽度和高度以满足绝对定位。为什么img＃utas没有？
JSFiddle：http : //jsfiddle.net/pejh7/1/
HTML代码：
<div id="upsko">
<img id="utas" src="http://kharg.czystybeton.pl/108.png" />
<div id="ipsko"></div>
</div>
CSS代码：
div#upsko {
position: relative;
top: 200px; left: 200px; width: 100px; height: 100px;
background: rgba(255,0,0,0.5);
}
img#utas {
position: absolute;
top: 10px; left: 10px; right: 10px; bottom: 10px;
}
div#ipsko {
position: absolute;
top: 0; left: 0; bottom: 0; right: 0;
background: rgba(0,255,0,0.5);
}
推荐指数
解决办法
查看次数
CSS:保证金权利和绝对定位
我在页面中有一个div.现在,当我将其位置指定为绝对位置并给出margin-left == 20px时:
我明白那个.div元素应该向右移动20 px,这样你就可以在div和body之间存在20px的边距.
现在,当我从右侧提供20px的边距时,不应该整个div向右侧移动,与身体的间隙为20px.
.container{
position: absolute;
background-color:gray;
margin-right: 50px;
height: 200px;
}
我知道我可以定位div给出左右两个值.但真正的问题是保证金留下工作但保证金权利不行!这是什么原因？帮助赞赏!
推荐指数
解决办法
查看次数
固定位置固定在Chrome中,后面有Flash
我有一个奇怪的错误,最近开始在Chrome中发生(在IE,FF甚至Safari中工作正常).这是几个星期前的工作,所以我假设这是最近Chrome版本中出现的错误.
基本上我将闪光灯固定在页面的"后面",并且我在页面上方有一个覆盖层(视频控件).
我知道Chrome 22包含固定元素的单独堆叠上下文,但几周之前就已经开始工作了,我们现在使用的是Chrome 27,所以这似乎并不相关.我也对这两个元素都有一个zindex.
有任何想法吗？
编辑:我忘了提叠加是在正确的地方,它是可点击,滚动时它只是没有在正确的位置可见.
推荐指数
解决办法
查看次数
不能在位置固定的div内浮动
<div style="width:200px">
<span style="float:left">left</span>
<span style="float:right">right</span>
<br/>
<div style="position:relative">
<span style="float:left">left</span>
<span style="float:right">right</span>
<div>
<br/>
<div style="position:fixed">
<span style="float:left">left</span>
<span style="float:right">right</span>
</div>
右侧浮动的跨度不会在位置固定的div内浮动.
我得出的结论是,如果容器的宽度未知,浮动将不起作用,在这种情况下,宽度确实是未知的.
所以可以解决这个问题的另一个问题是如何将固定位置的子设置为其父级的100%宽度？
PS我正在使用bootstrap 3,这意味着容器div(我设置为200px)实际上是类col-md-3 - >我不知道容器的宽度,这就是为什么我需要它是动态的
推荐指数
解决办法
查看次数
使用bootstrap在警报内定位按钮
对于过去几个小时,我已经试过了,我便想起和SO里面移动按钮,发现一切可能的方式<div>与alert阶级的权利,而不改变它的垂直位置,所以它保持与文本对齐,但不幸的是我想出了没有.
这里是简单的html部分:https: //jsfiddle.net/me420sky/
我想要的是将按钮放在右侧.是的,我知道pull-right但是它会从常规流程中消失,文本不再对齐.定位也是如此,因此页面不再响应.
请帮忙
推荐指数
解决办法
查看次数
CSS - 如何在div中滚动列表
如何只滚动列表？我想要.text和.link-item固定,只在容器内的列表上滚动.
.container {
position: relative;
float: right;
width: 74.4%;
height: 150px;
background-color: rgb(230, 230, 233);
margin-top: 30px;
box-shadow: 2px 2px 2px 0px rgba(0, 0, 0, 0.1), 0 4px 4px 0 rgba(0, 0, 0, 0.15);
text-align: left;
border-radius: 4px;
}
.text {
position: fixed;
font-size: 12px;
font-weight: 600;
font-family: 'Open Sans', sans-serif;
color: rgb(116, 124, 142);
float: left;
padding: 10px 0px 0px 40px;
}
.box {
position: absolute;
padding: 20px 50px 0px 30px;
color: rgb(116, 124, 142); …推荐指数
解决办法
查看次数
Bulma.io中的容器大小
我已经开始学习布尔玛。我想在x轴上最小化容器（图片中的灰色区域）的大小，以便将元素嵌入其中。找不到文档中的任何相关内容。这是我的源代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" it>
<title>Title</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.1/css/bulma.css">
</head>
<body>
<section class="hero is-medium">
<div class="hero-body has-background-danger">
<nav class="navbar has-background-primary">
<div class="container has-background-grey-light is-fluid ">
</div>
</nav>
</div>
</section>
</body>
</html>
这是此代码的示例视图：
推荐指数
解决办法
查看次数