滥用绝对定位。这是分层页面的正确方法吗？

Question

所以，我一直在搞乱网页设计，但我通常会删除我制作的每个项目（图像画廊）。但是这次我决定最终做出一些东西并保留它。问题是，绝对定位很容易使用，但我不知道这是否是使用它的正确方法，因为我是否过度使用它？绝对定位使用多少是有限制的？我最大的问题是在使用绝对定位时我必须要有多少。我必须手动设置元素的确切位置，逐个像素，边距。如果你仔细观察，你会注意到一些元素没有完全占据空间，就像你可以看到一些元素和边缘之间有一点点空白。 无论如何，我想通过增加尺寸（或我必须做的任何事情）来使页面元素更精确，以完全填满任何空白区域，但我不知道我是否应该继续使用绝对定位或现在就停下来，在太晚之前使用其他定位。 不要担心这些元素＆＃39;姓名和身份证。这是我的CSS，完整的HTML下面

body
{margin:0px; margin-top:0px; padding:0px;}
#headBar
{background-color:black; margin-top:-16px; height:30px;}
.headerText{
color: white;
}
#leftMenu
{background: pink;
float:left;
height:989px; 
width:190px;
opacity:;
}

#mainImage
{background:yellow; 
height:500px;
width:1160px;
position:absolute;
left:189px;
}
img
{position:absolute; right:0px;}
#secondImage
{background:aqua; height:490px; 
width:350px; position:absolute; 
top:530px;
margin-left:190px;}

#message
{background:pink;position:absolute; top:530px; left:539.5px;
width:400px; height:190px;
}

#otherMsg
{background:purple; position:absolute;top: 530px; left:940px;
width:409px; height:490px;
}
#thirdMessage
{background:green; position:absolute; z-index:1;
top:720px; left:540px; width:400px; height:300px;
}

这里是jsfiddle- http://jsfiddle.net/3vWAG/

Answer 1

Nopes。这是最糟糕的方式。为了实现这样的目标，您需要使用float，clear。使用这两者可以实现整个事情。这不是推荐的方式。不同的浏览器以不同的方式解释它。

而且，这是一个流畅的布局！ ：）

您的HTML在逻辑上应该只包含这段代码，而不是其他任何内容：

HTML

<header>Models Point</header>
<div class="content">
    <div class="side">Whole Page</div>
    <div class="main">
        <div class="intro">Lorem ipsum dolor sit amet?</div>
        <div class="boxes three-col">
            <div class="col sec-img">Second Image</div>
            <div class="col">
                <div class="row small-msg-box">Small Message Box</div>
                <div class="row small-msg-box">Third Message Box</div>
            </div>
            <div class="col other">Other image box next to the message box</div>
        </div>
    </div>
</div>

CSS

* {font-family: Segoe UI; margin: 0; padding: 0;}
header {background: #000; color: #fff; padding: 5px;}
.content {overflow: hidden;}
.side {float: left; width: 20%; background: #fcc; height: 300px;}
.main {float: right; width: 80%;}
.three-col {overflow: hidden;}
.three-col .col {float: left; width: 33.333%;}
.small-msg-box {height: 100px; background: #080;}
.small-msg-box:first-child {background: #fcc;}
.intro {background: #ff0; height: 100px;}
.sec-img {background: #0ff; height: 200px;}
.other {background: #808; height: 200px;}

预览

小提琴：http://jsfiddle.net/praveenscience/9QGTs/

Answer 2

为了扩展我的评论，如果你还没有看到相对定位的好处那么我会假设你是一个乞丐。这是一个有用的视频，可以帮助您重新设计页面：

  

https://www.youtube.com/watch?v=0afZj1G0BIE

此外，这对于比较最佳使用每种定位方法非常有用：

  

http://www.barelyfitz.com/screencast/html-training/css/positioning/

最后，在不久的将来，对您非常有用的一般网站可能是CSSTricks！

Answer 3

我会说，绝对定位绝对是不布局基础的首选（除了特殊边缘情况）。

我知道初学者很容易在火车上跳跃 - 因为与f.e.相比，快速给他们初步结果并且非常简单是最快的事情。了解浮动的复杂性。

但是对于“一切”使用绝对定位存在许多固有的问题，作为一个初学者，你可能无法看到/识别出相当远的东西 - 但是他们 最终会出现，然后你将不得不寻找一半的修复，或者更有可能，甚至从头开始。

前面提到的float属性是我们最常用的布局工具之一 - 尽管它最初并不是真的，并且有其自身的怪癖和缺点;但是，我认为可以说， 主要的CSS布局方法至少可以持续五年 - 所以我想你应该先从感受到这一点开始。它有很好的文档记录，并且有很多资源可以帮助您了解基本知识并为常见方案提供方法。 （并且还将它与使用“内联块”进行比较，它们相似但不同; - ））

现在有一个名为“flexbox”的新概念/模型 - 他们想出来解决浮动的所有缺点以及我们与之结合使用的其他工具。虽然它相对（！）是新的，并且浏览器支持还不完美 - 但它确实值得研究，尽管它最初可能比浮动概念更复杂。

首先从float开始，然后继续使用像flexbox这样的高级内容。

---

之前所说的一切当然并不意味着你应该完全避免使用绝对定位 - 有明确的许多用例， 是工作的工具，但主要用于较小的<你的布局的em>部分和“特殊”效果。但是对于布局的整个，99.9％的情况下不。