标签: css-position
按中心点定位,而不是左上角
是否可以通过元素的中心点而不是左上角来告诉代码？如果我的父元素有
width: 500px;
而我的孩子元素有
/*some width, for this example let's say it's 200px*/
position: absolute;
left: 50%;
可以假设,基于50%定位,子元素将位于父元素的中间,150px每侧留下自由空间.然而,它不是,因为它是孩子的左上角,50%达到了父母的宽度,因此整个孩子的宽度200px从那里向右移动,留下250px左边的自由空间,只50px留在右边.
所以,我的问题是,如何实现中心定位？
我找到了这个解决方案
position: absolute;
width: 200px;
left: 50%;
margin-left: -100px;
但我不喜欢它,因为你需要为每个元素的宽度手动编辑它 - 我想要一些全局工作的东西.
(例如,当我在Adobe After Effects中工作时,我可以为对象设置位置,然后设置将放置到该位置的该对象的特定锚点.如果画布是1280px宽的,则将对象定位到640px您选择对象的中心作为锚点,然后整个对象将在1280px宽画布中居中.)
我会在CSS中想象这样的事情:
position: absolute;
left: 50%;
horizontal-anchor: center;
类似地,horizontal-anchor: right将元素放置在右侧,因此整个内容将从其父级50%宽度的点开始向左.
并且,同样适用vertical-anchor,你得到它.
那么,这样的事情可能只使用CSS(没有脚本)吗？
谢谢!
推荐指数
解决办法
查看次数
div中带有滚动条的div,位置为:fixed
我有一个div位置:固定这是我的容器div为一些菜单.我把它设置为顶部:0px,底部:0px以始终填充视口.在div里面我想要另外两个div,其中较低的一行包含很多行并且有溢出:auto.我希望它将包含在容器div中,但如果有太多行,它只是扩展到固定div之外.下面是我的代码和截图,以澄清:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>MyPlan</title>
<meta name="X-UA-COMPATIBLE" value="IE=8" />
<style type="text/css">
#outerfixed { position:fixed; width:200px; background-color:blue; padding:5px; top:0px; bottom:30px;}
#innerstatic1 { width:100%; background-color:yellow; height:100px;}
#innerstatic2 { overflow:auto; background-color:red; width:100%;}
</style>
</head>
<body>
<div id="outerfixed">
<h3>OUTERFIXED</h3>
<div id="innerstatic1">
<h3>INNERSTATIC1</h3>
</div>
<div id="innerstatic2">
<h3>INNERSTATIC2</h3>
line<br />
...lots of lines
line<br />
</div>
</div>
</body>
</html>
我有什么方法可以做到这一点吗？同样,我想#innerstatic2进行适当包含#outerfixed内,并得到滚动条,如果它变得比它里面#outerfixed空间较大.
我知道有一些possibilites也通过固定#innerstatic2破解解决这个问题,但我真的很喜欢它是流中可能的话里面#outerfixed,所以如果我搬到什么地方#outerfixed,内部元件会随之而来.
编辑:我知道我可以设置溢出:在#outerfixed汽车,并获得整个事情的滚动条,但我特别希望只是#innerstatic2一个滚动条,这是一个网格,我想滚动只是电网.
任何人？可能？
推荐指数
解决办法
查看次数
CSS位置绝对值和父容器的宽度百分比
我正在尝试构建一个宽度灵活的HTML/CSS下拉菜单.由于position:absolute导航的第二级,我没有得到第一级的宽度.删除位置:绝对将在悬停时移动所有后续元素...
我怎么解决这个问题？
这是代码:
ul {
margin: 0;
padding: 0;
list-style: none;
}
.level_1 > li {
float: left;
width: 45%;
background-color: #2FA4CF;
margin-right: 6px;
}
.level_1 > li:hover ul {
display: block;
}
.level_2 {
display: none;
position: absolute;
width: 45%;
}
.level_2 li {
background-color: #535B68;
}<ul class="level_1">
<li>
<a href="#">Level one (1)</a>
<ul class="level_2">
<li><a href="#">Level two (1)</a></li>
</ul>
</li>
<li><a href="#">Level one (2)</a></li>
</ul>
<p>Paragraph</p>看到这里的结果:http://jsfiddle.net/5uf2Y/ 悬停"一级(1)",你会看到,第二级与第一级不一样......
推荐指数
解决办法
查看次数
如何使用z-index与相对定位？
我的z-index和我的代码存在严重问题.我想在每一行都有一个弹出窗口并相对于该行定位.所以我创建了这段代码:
<div class="level1">
<div class="level2">
<input type="text" value="test1" />
<div class="popup">test1</div>
</div>
<div class="level2">
<input type="text" value="test2" />
<div class="popup">test2</div>
</div>
</div>
与te以下风格
.level1
{
position:relative;
z-index:2;
}
.level2
{
position:relative;
z-index:3;
}
.popup
{
position:absolute;
left:0px;
top:10px;
width:100px;
height:100px;
background:yellow;
z-index:4;
}
我知道我做错了什么,但我找不到我的愚蠢.
推荐指数
解决办法
查看次数
固定位置不适用于标题
我正在尝试创建一个非常简单的效果,当您向下滚动页面时导航会粘到页面顶部.我所要做的就是将"position:fixed"设置为我目前拥有的标题.出于某种原因,它将它视为"位置:绝对"元素与固定元素.我在页面上的其他元素上尝试了相同的效果,所以我必须在我的HTML或CSS代码中有一些导致问题的东西.有任何想法吗？
http://jsfiddle.net/apautler/yDhXG/1/embedded/result/
标题CSS
.nav-main {overflow: visible; position: fixed;
top: 0; left: 0; right: 0; height: 60px; width: 100%;}
请注意,该网站是响应式的,所以position: fixed踢的是768px.
推荐指数
解决办法
查看次数
为什么`overflow:hidden`阻止`position:sticky`工作？
在下面的代码段中,div容器内部有一个粘性位置.它始终保持在容器内部,并粘在滚动面板的顶部.这与UITableViewiOS上的标题的行为相同,其中标题保持可见,直到下一个标题位于顶部.
在第二个片段中,除了容器具有overflow:hiddenCSS规则之外,一切都是相同的.这似乎可以防止position:sticky行为正常工作.
.parent {
position: relative;
background: #ccc;
width: 500px;
height: 150px;
overflow: auto;
margin-bottom: 20px;
}
.hidden-overflow {
overflow: hidden;
}
.sticky {
position: sticky;
background: #333;
text-align: center;
color: #fff;
top: 10px;
}<div class="parent">
<div>
<div class="sticky">
Hi, I am a sticky inside the container which contains the first paragraph.
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus volutpat sed metus et porttitor. Integer bibendum lacus …推荐指数
解决办法
查看次数
在悬停时创建CSS"路径"
我尝试使用(主要)CSS时产生一个"好"的CSS菜单,但有微小的一点jQuery的还有:
我的总体想法是:
+------------------------+
| |
| |
| +---+ |
| | | |
| |___| | <-- Hover this center piece
| |
| |
| |
+------------------------+
+------------------------+
| _ |
| |\ | <-- All start moving up to top of screen
| \ +---+ |
| | | |
| |___| |
| |
| |
| |
+------------------------+
+------------------------+
| +---+ |
| | | |
| |___| |
| | …推荐指数
解决办法
查看次数
在scrollTop以编程方式更改后,固定定位按钮上的移动Safari错误...？
我刚刚做了一个网页但是Mobile Safari(iPhone和iPad iOS 5.0.1)中有一个错误,它有两个固定在右上角和右下角的按钮.
直到在打开页面其余部分的文本框上单击提交后,按钮才会淡入...在页面的其余部分加载并且按钮淡入后,您可以单击它们中的任何一个并且它们都可以工作...
但是,单击它们会导致编程滚动,滚动完成后,您不能再点击任何一个按钮,直到您用手指物理滚动页面,即使只是一个小像素滚动...
我注意到的是,在程序化滚动之后,如果你点击TOP按钮的下方,你会看到高亮显示,就好像你点击了BOTTOM按钮并处理了底部按钮的动作,这告诉我当滚动时的错误以编程方式,固定位置按钮仍然与页面的其余部分一起移动,并且在执行实际触摸滚动之前不会返回到其固定位置....
有没有人知道解决这个问题的方法..？
我添加了一个弹出按钮,显示按下了哪个按钮,以便你可以测试它,记得在第一次按下向下按钮(有效)后再次按下按钮,它将无法工作,但点击向上按钮下方你会看到发生的向下按钮动作....
谢谢您的帮助.
托马斯
(如果你能指出我可以向苹果公司提交一个错误的地方,那也是好的,除非已经有了)
编辑:只需单击任一提交箭头,您无需输入其默认的工资/薪水
编辑2:这是一个更简单的例子,显示相同的问题..
http://www.tsdexter.com/MobileSafariFixedPosBug.html
编辑3:向Apple报告错误
推荐指数
解决办法
查看次数
将绝对置于相对定位元素后面
我在同一个容器中有两个元素,第一个position: absolute是第二个元素position: relative.有没有办法设置绝对元素的"z-index",以便它在后台？相对定位元素应位于顶部(z层),因为它保持链接...
这是一个JSFiddle:http://jsfiddle.net/8eLJz/
绝对定位元素位于z层的顶部,我对z-index-property 没有影响.我能做什么？
推荐指数
解决办法
查看次数
禁用水平滚动条,因为DIV位置:绝对位于页面之外
我有一个位于页面"外部"的绝对定位元素,但我希望浏览器(我使用的是Firefox 3)不显示水平滚动条.似乎显示位于左侧的div(例如,具有"left:-20px")是可以的,并且没有显示滚动条.但是右边的相同内容("右:-20px")始终显示滚动条.是否可以隐藏滚动条,但是可以保持标准滚动？我的意思是我只想禁用由于这个绝对定位元素的滚动,但是由于其他元素而保持滚动(我知道我可以完全禁用滚动条,这不是我想要的).
<!DOCTYPE html>
<html>
<body>
<div id="el1" style="position: absolute; top: 0; background-color: yellow; left: -20px;">
element
</div>
<div id="el2" style="position: absolute; top: 0; background-color: yellow; right: -20px;">
element
</div>
<h1>Hello</h1>
<p>world</p>
</body>
</html>
推荐指数
解决办法
查看次数