标签: positioning

是否可以将DIV位置从绝对位置更改为相对位置(以及相对于绝对位置)？DIV应该留在同一个地方.

我想在下一行旁边显示一行拖曳div,下一个div直接位于最后一个div下面.像这样:

因为布局必须内置到CMS中,所以我不能将Box 1,3和2,4放在一个单独的div中.有没有办法在没有额外包装元素的情况下实现这种行为？(正常浮动行为不起作用,显示内联/内联块也不起作用.)或者是否需要一些JavaScript来构建这样的布局？

我的页面#topLeft上有一个区域,其最小高度设置为它.

在#topLeft中我有一个#heroBanners部分,我想锚定到#topLeft的底部 - 使用position:absolute; 底部:0;

起初这个工作正常,但是当#topLeft应该展开时它不是,而heroBanner部分只是重叠它上面的内容.

我假设通过混合最小高度和绝对定位内容来调用问题？

任何想法如何绕过这个,代码如下:

<div id="topLeft">
<div class="linksBox"> 
<ul>
<li>Item 1</li>
<li>Item2 </li>
<li>Item 3</li>
<li>Item4 </li>
</ul>
</div>
<div id="#heroBanners">

</div>

</div>

#topLeft {margin:0 27px 27px 0;  width:478px; min-height:378px; *height:378px; *margin-bottom:22px; position:relative;}

#heroBanners {bottom:0; position:absolute;}

我的主要内容位于页面中心,宽度约为900px.在大屏幕上,我的内容的右边缘和浏览器窗口的右边之间有足够的空间,我可以在右下角显示一个小的100x100px div,它看起来很好,因为该div和主要内容.当屏幕尺寸小于相对位置的div与我的内容的右下角重叠时.如果它在我的内容的20px范围内,我怎么能设置display = none？谢谢

我正在写一个网站/ iPad应用程序(使用PhoneGap),我在幻灯片放映中有1024x768图像.我想在1024x768图像的顶部放置另一个图像,例如主图标,位于完全相同的位置,无论屏幕尺寸如何(例如高/低分辨率PC屏幕,或1024x768平板显示器).我试过绝对,但位置在不同的显示中发生变化,并且它与我最初在CS 5中设置的位置不同.

我正在页面的中心做一个小div,它有一个固定的页脚,但div是可滚动的.
据我说,有两种方法可以做到:

1. 使用position:fixed:固定位置实际上相对于浏览器窗口工作,但我想要相对于我的小div的位置
2. 使用position:absolute:使用bottom:0;我最初解决了问题,但页脚滚动了div文本.

HTML:

<div id="wrapper">
    <div id="box">
        <div id="header">
            <h1>Heading</h1>
        </div>
        <div id="content">
           Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text Some text …

我正在使用jQuery偏移函数将绝对定位的DIV放在锚元素上.

$("#marker1").offset({ top: $("#<%= hypHowItWorks.ClientID %>").offset().top, left: $("#<%= hypHowItWorks.ClientID %>").offset().left });
$("#marker1").width( $("#<%= hypHowItWorks.ClientID %>").outerWidth() );

当页面加载时,这工作正常,但是,如果我通过按F5重新加载页面,它会显示DIV稍微偏离它的位置.如果我然后在浏览器中向后翻页,它又在正确的位置!

这是最新Chrome和Firefox的问题,但不适用于IE9.

有任何想法吗？

克里斯.

是否可以进行不影响附近元素位置的高度过渡？

这个特殊情况涉及带浮点数的div:left.

演示:http: //ashleystewart.me/

我希望悬停过渡到你可以看到移动的元素之上.

我有一个类,div它在左上角包含一个图标作为背景图像,在其余部分包含文本div.该div有32PX的最低高度,使所有的图标的显示.

当存在多行文本时,线条看起来很好,因为它们div向下拉伸的时间长于最小高度,但是当只有一条线条时,它不会与图标的中心垂直对齐.

JSFiddle在这里.

有没有办法让单行垂直对齐,但是当有多行时不会弄乱它？

.test {
    background-color: #98c5ff;
    color: #093d80;
    width: 400px;
    min-height: 32px;
    background-image: url("http://google.com/favicon.ico");
    background-repeat: no-repeat;
    padding-left: 42px;
}

<div class="test"><p>Short message</p></div>
<hr />
<div class="test"><p>Rather long message that should hopefully wrap on to a second line at some point.</p></div>
<hr />
<div class="test"><p>Message<br />with<br />many<br />lines<br />.</p></div>

我有一个简单的布局,有不同大小的元素,我试图把它放在一起用于仪表板.

div {
  padding: 5px 5px 5px 5px;
  margin: 1px 1px 1px 1px;
  display: flex;
}
div.first {
  border: 1px dotted lightpink;
}
div.second {
  border: 1px dotted orange;
}
div.third {
  border: 1px dotted green;
}
div.fourth {
  border: 1px dotted fuchsia;
}

<div style="display: flex; height: 500px">
  <div class="first" style="flex: 0 60%;flex-wrap: wrap;align-items;stretch;align-content:stretch">
    <div class="first" style="flex: 1 100%; align-self: flex-start">
      Title text
    </div>
    <div class="second" style="flex: 2 auto">
      Content A
    </div>
    <div class="third" style="flex: 1 auto">
      Content B …