Question

我有以下html：

<div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="reference" class="group">
    <h1 class="resizeme">hello world</h1>
    <div class="resizeme">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
    tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
    quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
    consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
    cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
    proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    <p class="resizeme" style="background:red;">hello there I am another text</p>

    </div>
</div>

使用以下css

      .resizeme{
            background: gray;
            padding: 6px;
        }

        body{
            position: relative;
            margin: 0;
            padding: 0;
        }

        #reference{
            background: orange;

        }

        .group:before,
        .group:after {
            content: "";
            display: table;
        } 
        .group:after {
            clear: both;
        }
        .group {
            zoom: 1; /* For IE 6/7 (trigger hasLayout) */
        }

这就是它的样子（请注意红色部分＆＃39;在底部＆＃39;是否位于灰色日内）：

http://jsfiddle.net/mody5/f30s81yv/1/

使用jQuery我想将div＃reference设置为position：relative; #reference position:absolute内的所有其他HTML相对于#reference

我尝试了这个（但它破坏了设计）：

$("#reference").css("position", "relative");
$("#reference *").css("position", "absolute");

我试过这个（这也打破了设计）：

$('#reference *').appendTo('#reference');

我如何解决这个问题？

Answer 1

＆＃13;

 // javascript variable should be declared on top.
 var $ref = $("#reference"); // for performance benifits http://jsperf.com/jquery-vs-fasterjquery

 //single line
 $ref.css("position", "relative");
 var $allNestedElements = $ref.find("*");
 $allNestedElements.css("position", "absolute"); // for performance benifits http://jsperf.com/jquery-vs-fasterjquery

＆＃13;

.resizeme {
  background: gray;
  padding: 6px;
}
body {
  position: relative;
  margin: 0;
  padding: 0;
}
#reference {
  background: orange;
}
.group:before,
.group:after {
  content: "";
  display: table;
}
.group:after {
  clear: both;
}
.group {
  zoom: 1;
  /* For IE 6/7 (trigger hasLayout) */
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="reference" class="group">
  <h1 class="resizeme">hello world</h1>
  <div class="resizeme">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
    dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    <p class="resizeme" style="background:red;">hello there I am another text</p>

  </div>
</div>

＆＃13;

Answer 2

Why not just use CSS? Here is a JSFiddle that does it in CSS and has the same layout:

.resizeme {
    background: gray;
    padding: 6px;
}
html, body {
    margin: 0;
    padding: 0;
}
#reference {
    position: relative;
    background: orange;
}
.group:before, .group:after {
    content:"";
    display: table;
}
.group:after {
    clear: both;
}
.group {
    zoom: 1;
    /* For IE 6/7 (trigger hasLayout) */
}

#reference > .resizeme {
    position: absolute; /* This line gives the children of #reference absolute positioning */
}

#reference > h1.resizeme {
    display: inline-block;
    width: 100%;
    margin-top: 21px;
    padding: 6px 0px;
}

#reference > h1.resizeme:before {
    content: "";
    position: absolute;
    top: -21px;
    height: 21px;
    width: 100%;
    background: orange;
}

#reference > h1.resizeme:after {
    content: "";
    position: absolute;
    display: block;
    bottom: -21px;
    height: 21px;
    width: 100%;
    background: orange;
}

#reference > div.resizeme {
    top: 92px !important;
}

<div>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="reference" class="group">
    <h1 class="resizeme">hello world</h1>
    <div class="resizeme">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        <p class="resizeme" style="background:red;">hello there I am another text</p>
    </div>
</div>

As you can see, no jQuery/JavaScript needed with this approach.

当存在大量嵌套元素时，如何将位置绝对设置为特定div元素

2 个答案: