Question

我有以下网址：Website

我真正希望做的是将Weather DIV浮动到页面顶部就像现在一样，但是当我展开或折叠它时，它只是漂浮在顶部而不会推动任何内容。我如何实现它？

我的天气DIV CSS：

#weather {
    margin: 0 auto;
    padding: 0;
    width: 177px;
    font: 75%/120% Arial, Helvetica, sans-serif;
    top: 0;
    position: relative;
    z-index: 999999999;
}

Answer 1

绝对定位

#weather {
    position: absolute;
    left: 50%;
    width: 177px;
    margin-left: -88px; /* 50% of the width */
}

并在当前包装器的高度为您的身体padding-top

body {
    padding-top: 50px; /* or so */
}

Answer 2

你可以给它一个相对或绝对的位置。

Answer 3

最好将'#weather'元素放在dom的'#wrapper .shell'区域内，并给它一个'position：absolute'属性。

'position：absolute'基本上告诉浏览器忽略元素的高度，而是将所有显示责任移交给你为它定义的css。

此外，您可以通过将“#weather”宽度设置为990px（网站框架的宽度）来使其看起来更好。这样也可以将黑色条扩展到网站框架的宽度上。这将开始为你清理。

在CSS中浮动DIV

3 个答案: