Question

我想问哪个是通过CSS定位DIV的最佳方法 - 使用RELATIVE或ABSOLUTE位置值？当页面使用RELATIVE位置是CSS时 - 我无法在Dreamweaver中手动拖动div块，就像我可以使用ABSOLUTE位置一样。这是正常的吗？您认为哪个是定位DIVS的最佳方式？

我包含了两个文件：

Draggable valiant（由SiteGrinder PSD生成到HTML转换器）：

https://jsfiddle.net/3j89xcnr/

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />




<style>
#page_content  {
   min-height: 2000px;
}

#rectangle1  {
    background-repeat: no-repeat;
    /* [disabled]background-image: url(sg_prototype_media/rectangle1.gif); */
    margin-top: 0px;
    margin-left: 0px;
    height: 153px;
    width: 479px;
    z-index: 4;
    top: 46px;
    left: 29px;
    position: absolute;
}

#rectangle2  {
    background-repeat: no-repeat;
    /* [disabled]background-image: url(sg_prototype_media/rectangle2.gif); */
    margin-top: 0px;
    margin-left: 0px;
    height: 153px;
    width: 856px;
    z-index: 4;
    top: 51px;
    left: 524px;
    position: absolute;
}

#rectangle3  {
    background-repeat: no-repeat;
    /* [disabled]background-image: url(sg_prototype_media/rectangle3.gif); */
    margin-top: 0px;
    margin-left: 0px;
    height: 884px;
    width: 520px;
    z-index: 4;
    top: 48px;
    left: 1403px;
    position: absolute;
}

#rectangle4  {
    background-repeat: no-repeat;
    /* [disabled]background-image: url(sg_prototype_media/rectangle3.gif); */
    margin-top: 0px;
    margin-left: 0px;
    height: 701px;
    width: 1351px;
    z-index: 4;
    top: 229px;
    left: 29px;
    position: absolute;
}


#background  {
    background-repeat: no-repeat;
    /* [disabled]background-image: url(sg_prototype_media/background.gif); */
    margin-top: 0px;
    margin-left: 0px;
    height: 2000px;
    width: 2000px;
    z-index: 3;
    top: 0px;
    left: 0px;
    position: absolute;
    background-color: rgb(0,0,0);
}

.page_content_bkg  {
   width: 2000px;
   height: 2000px;
   left: 0px;
   top: 0px;
   display: block;
}

.container_div  {
   position: relative;
   width: 2000px;
   margin-bottom: 0px;
   margin-right: auto;
   margin-top: 0px;
   margin-left: auto;
}

.spacing_div  {
   min-height: 0px;
   height: 0px;
}

*:focus  {
   outline-style: none;
}

.full_width  {
   position: relative;
   padding: 0px;
   margin: 0px;
   min-width: 2000px;
}

ains  {
   text-decoration: none;
}

html, body  {
   height: 100%;
   background-color: #FFFFFF;
}

body  {
   -webkit-text-size-adjust: none;
   height: 100%;
   padding-bottom: 0px;
   padding-top: 0px;
   padding-right: 0px;
   padding-left: 0px;
   margin-bottom: 0px;
   margin-top: 0px;
   margin-right: 0px;
   margin-left: 0px;
}
</style>




<!-- (sg_cms) -->
<!--  -->
<!-- (sg_emit "sg_prototype_content/title.xml") -->
</head>
<body>
 <div id="page_div">
  <div class="full_width" id="page_content">
   <div class="container_div">
  <div id="background" class=""></div>
  <div id="rectangle1" class="">
    <iframe src="http://www.bbh.com"height="100%" width="100%" frameborder="0" scrolling="no"> </iframe>
  </div>
  <div id="rectangle2" class=""><iframe src="http://www.bbh.com"height="100%" width="100%" frameborder="0" scrolling="no"> </iframe></div>
  <div id="rectangle3" class=""><iframe src="http://www.bbh.com"height="100%" width="100%" frameborder="0" scrolling="no"> </iframe></div>
  <div id="rectangle4" class=""><iframe src="http://www.bbh.com"height="100%" width="100%" frameborder="0" scrolling="no"> </iframe></div>

    <div id="pagesize_gap" style="height:2000px;"></div>
    <div id="clear_footer"></div>
   </div><!-- /prototype container_div -->
  </div><!-- /page_content:full_width -->
 </div><!-- /page_div -->

<!-- (sg_chau) -->
<!-- (sg_suppress  -->  <!--) -->
</body>
</html>

固定div（由Webbsy PSD生成到HTML转换器）::

https://jsfiddle.net/uo223L9h/

<!DOCTYPE html>
<html>
  <head>
    <title>Layout Sheet</title>
    <style type="text/css">
body {
    margin: 0;
    min-width: 2000px;
    background-color: #0D0D0D;
}

#rectangle-1 {
  float: left;
  position: relative;
  width: 479px;
  height: 153px;
  margin-top: 16px;
  margin-left: 89px;
  z-index: 1;
  background-color: #000;
}

#rectangle-2 {
    float: left;
    position: relative;
    width: 614px;
    height: 145px;
    margin-top: 16px;
    margin-left: 263px;
    z-index: 2;
    background-color: #000;
    top: 8px;
}

#rectangle-3 {
    float: left;
    position: relative;
    width: 1400px;
    height: 424px;
    margin-top: 93px;
    margin-left: 89px;
    z-index: 3;
    background-color: #000;
    clear: left;
}

    </style>
  </head>
  <body>
  <div id="rectangle-1"><iframe src="http://www.bbh.com"height="100%" width="100%" frameborder="0" scrolling="no"> </iframe></div>
    <div id="rectangle-2"><iframe src="http://www.bbh.com"height="100%" width="100%" frameborder="0" scrolling="no"> </iframe></div>
    <div id="rectangle-3"><iframe src="http://www.bbh.com"height="100%" width="100%" frameborder="0" scrolling="no"> </iframe></div>
  </body>
</html>

请让我知道你的想法！戴夫

使用CSS定位DIV的最佳方法

0 个答案: