使用Raphael JavaScript库时,如何找到纸张/画布的绝对位置？
例如,假设最小工作示例如下:
<html>
<head>
<script type="text/javascript" src="raphael.js"></script>
<script>
window.onload = function() {
var size = 600;
var paper = new Raphael(document.getElementById("canvas_container"),
size, size);
var c = paper.circle(100, 100, 50).attr({fill: "#00f"});
var x = 0; // get the paper's absolute x coordinate
var y = 0; // get the paper's absolute y coordinate
document.getElementById("coordinates").innerHTML = x + " " + y;
};
</script>
<style type="text/css">
#canvas_container {
width: 600px;
margin-left: auto;
margin-right: auto;
border: 1px solid #aaa;
}
</style>
</head> …假设我有一个类似的文档
<style type="text/css">
div {
border:1px solid;
padding:15px;
}
#i_am_relatively_positioned{
background-color:#fcc;
margin:50px;
padding:50px;
position:relative;
}
#inner {
background-color:#cfc;
}
#i_want_to_be_absolute_to_body{
background-color:#ccf;
left:0;
position:absolute;
top:0;
}
</style>
<body>
<div id="i_am_relatively_positioned">
<div id="inner">inner</div>
<div id="i_want_to_be_absolute_to_body">absolute to body</div>
</div>
</body>
有没有一种方法,使绝对定位相对于body元素,而不是其直系亲属容器#i_want_to_be_absolute_to_body？
我知道我可以使用一些负面的顶部和左边,但这似乎是kludgey - 这是我唯一的选择吗？
我遵循DOM结构
<div>
<span>/* comment action */</span> //float:left
<span>/* like action */</span> //float:left
<span>/* other actions //float:right; position:relative;
<ul> //position:absolute;
<li>Set due date</li>
<li>Delete</li>
</ul>
</span>
</div>
问题是,列表项的宽度设置为最长字的宽度.我希望每个列表项都出现在一行(如块)中,最大宽度应该是最长列表项,并在其他下方显示一个.
以下是一些可以提供更好主意的屏幕截图.
http://imgur.com/IkbAI (单词"选项"的最大宽度)
http://imgur.com/h6uHc (单词"time"的最大宽度)
http://imgur.com/lNCQu (删除空格时单词"Setduetime"的最大宽度)
我怎样才能解决这个问题？(我不想指定具体的宽度ul)
我正在开发一个响应式设计,其中徽标需要位于页面的顶部/中心并覆盖其下方的内容.... http://reversl.net/demo/我可以通过给出这个所需的布局标志绝对的位置
position: absolute;
top: 0;
left: 50%;
margin-left: -98px; /*--half the width of the logo--*/
为了达到最佳标准......我有什么理由不采取这种方法吗？从环顾四周,人们倾向于不喜欢使用绝对定位.为徽标设置负上边距和自动左/右边距会更好吗？主要的是,当媒体查询断点开始时,徽标仍然是顶级中心.
以下制作a的示例position : fixed在我的FF16.02/IE9中不起作用.但就我所知,它应该是与浏览器兼容的.有任何想法吗？
我想做这样的事情
USER EMAIL
input input
但我无法想象如何以这种方式显示它.基本上我希望每组标签+输入字段都是div,但我希望div是并排的.也许我正在使用错误的标签,因为我是一个html noobie> <
我正试图将Twitter引导程序3模态显示固定在正文的右上角.
到目前为止,我已经尝试过:
有问题的CSS:
#confirm {
position: fixed !important;
width: 120px !important;
right: 10px !important;
//margin-left: 80% !important;
//-webkit-transform: translate(600px, 0px);
}
请看下面的小提琴:http: //jsfiddle.net/3kgbG/74/
我为响应式网站制作了一个粘性标题,其中标题也位于中心位置margin: 0 auto.它适用于Chrome/Firefox/Safari/IE8,但不适用于IE9 +.
最小标记:
<div class="viewport">
<header class="banner">
</header>
</div>
风格:
.banner {
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
max-width: 1024px;
margin: 0 auto;
}
在IE9 +中,标题卡在左侧.
按照上一个问题 - 固定位置侧边栏中的溢出问题 - 我有一个显示固定div的链接列表li:hover
http://codepen.io/anon/pen/RNxyVP
这适用于所有Windows浏览器 - Chrome,Firefox,Explorer,Opera和旧的Windows Safari.然而,在最新版本的Safari(在Mac上)和iOS上的扩展中,固定div显示保留在祖父固定div中,并且不会漂浮在页面的其余部分上.这也发生在Android chrome上.
有没有办法让固定的div浮动页面,而不是局限于包装 - 在这些浏览器上？
其他因素,如包装div可滚动(当前通过overflow-x: hidden;)也必须保持/
有谁知道一种将页脚像position: fixed元素一样固定在div底部的方法。我发现的所有方法都将其粘贴在开始视图的底部或底部，因此您必须一直向下滚动才能看到它们。
我试过将父项设置为position:relative，子项设置为position: absolute，也使用display: table-cell和vertical-align: bottom，但是在滚动时都不会将其固定在原处，而是在div的底部或默认视图的底部将其保留为静态。
.a{
position:relative;
background-color:#ccc;
width:500px;
min-height: 150px;
max-height: 150px;
overflow-y: scroll;
float:left;
padding:8px;
}
.footer{
position:absolute;
bottom:0;
left:0;
width:100%;
background-color:#666;
color:#fff;
}<div class="a">
Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />Some content<br />
<div class="footer">Some …css-position ×10
css ×9
html ×3
javascript ×2
css3 ×1
html5-canvas ×1
input ×1
ios ×1
label ×1
position ×1
positioning ×1
raphael ×1
safari ×1
width ×1