Question

我一直使用margin将浮动div移动到父div中的正确位置（比如标题div中的徽标div）。这一直有效，但这意味着你必须使用元素的个别高度，否则它将影响向下的布局的其余部分。

我今天找到了另一种方法，那就是使徽标div位置：相对;然后使用示例top：20px;移动元素，这似乎不会影响布局。

我不想在不知道可能存在其他影响的情况下适应这一点，那么任何人都可以指出上述任一方法中的常见缺陷或可能提出更好的解决方案吗？

  // Sample HTML
  <div id='header'>
        <div id='logo'>
              LOGO GOES HERE
        </div>      
  </div>

  // Sample CSS
  #header {
        height: 100px;
  }

  // Version 1
  #logo {
        float: left;
        margin-top: 20px;
  }

  // Version 2
  #logo {
        float: left;
        position: relative;
        top: 20px;
  }

Answer 1

这些是你的朋友......阅读 -

CSS Positioning 101

Positioning

Answer 2

From Mozilla developer:

<强>相对布置所有元素，就像元素不是一样定位，然后调整元素的位置，而不改变布局（从而为元素留下一个空隙一直没有定位）。位置的影响：相对于 table - * - group，table-row，table-column，table-cell和table-caption 元素未定义。

我希望这能回答你的问题。

有时使用它可能是正确的，有时则不是。这实际上取决于你的布局，如果你想做出响应式设计，那么在那里设置边距可能会更好。

在您的情况下，标题上有一个固定的高度，因此您可以使用相对值。我认为使用保证金是一种更常见的做法。我只知道移动设备上有关position: fixed的问题。

You can learn more about CSS and positioning here.

Answer 3

在绝对位置并且当你使用顶部或底部或右或左时修复，你不能使用浮动，你必须为其父级使用这种风格

postion:relative;

最好的问候

Answer 4

   <!Doctype html>
<html>
<head>
<title>POC 1</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

  <style>
    #sidenav
    {
    background-color:#f7f7f7;
    }
    .logo {
    margin-top:10%;
    background: url("bat_icons1.png") no-repeat -28px -29px;
    width: 174px;
    height: 94px;
    cursor:pointer;
    }
    .request {
    background: url("bat_icons1.png") no-repeat -40px -415px;
    width: 18px;
    height: 21px;
    margin-left:9%

    }
    .request:hover
    {
    background: url("bat_icons1.png") no-repeat -79px -416px;
    width: 18px;
    height: 21px;
    cursor:pointer;
    }
    .reports
    {
    background: url("bat_icons1.png") no-repeat -41px -356px;
    width: 16px;
    height: 20px;
    margin-left:9%
    }
    .reports:hover
    {
    background: url("bat_icons1.png") no-repeat -80px -356px;
    width: 16px;
    height: 20px;
    cursor:pointer;
    }
    .administrator
    {
    background: url("bat_icons1.png") no-repeat -40px -302px;
    width: 18px;
    height: 18px;
    margin-left:9%
    }
        .administrator:hover
    {

background: url("bat_icons1.png") no-repeat -79px -302px;
    width: 18px;
    height: 18px;
    cursor:pointer;
    }
    .weblinks
    {
    background: url("bat_icons1.png") no-repeat -40px -536px;
    width: 15px;
    height: 16px;
    margin-left:9%

    }
    .weblinks:hover
    {
    background: url("bat_icons1.png") no-repeat -80px -536px;
    width: 15px;
    height: 16px;
    cursor:pointer;
    }
    .subscription
    {
    background: url("bat_icons1.png") no-repeat -40px -475px;
    width: 16px;
    height: 16px;
    margin-left:9%
    }
    .subscription:hover
    {
     background: url("bat_icons1.png") no-repeat -80px -475px;
    width: 16px;
    height: 16px;
    cursor:pointer;
    }
    #hr1
    {
    width: 113%;
    margin-left: -6%;
    }
    #button1
    {
    background-color:orange;
    border: 0px;
    margin-left: 18%;
    font-size:18px;
    }
    ul {
    margin-top: 45px;
    margin-bottom: 10px;
    color:#0e338a;
}
#trendings
{
    position: absolute;
    left: 18%;
    top: 56%;
    color: #1f1f98;
}
.hastags
{
font-size: 11px;
    color: black;
    position: absolute;
    left: 18%;
    top: 61%;
    cursor:pointer;
}
.hash:hover
{
color:red;
}
#topnav
{
height:180px;
box-shadow: -6px -4px 17px #eee;
}
.form-control
{
border-radius: 0px;
}
#Input1
{
    position: absolute;
top: 10%;
 box-shadow: 1px 1px 10px #cac4c9;
 <!-- box-shadow: 0 0 17px #ddd; -->
}
#Input2
{
    width: 25%;
    position: absolute;
    left: 59.4%;
    top: 10%;
     box-shadow: 1px 1px 10px #cac4c9;
<!--  box-shadow: 0 0 17px #ddd; -->
}

#searchbutton {
    position: absolute;
    left: 84.4%;
    top: 10%;
    border-radius: 0px;
    width: 15%;
    color: #ffffff;
    background-color: #7E8D9E;
     box-shadow: 1px 1px 10px #cac4c9;
    <!--  box-shadow: 0 0 17px #ddd; -->
}
#searchbutton:hover
{
background-color:black;
}
.links
{
cursor:pointer;
}
.links:hover 
{
color:red;
}
#button1:hover
{
background-color:#8c7c5e;
}
#abc
{
color: #ccc;
font-size: 18px;
}
#abc:hover
{
color:#0c3274;
}
.topnavlinks
{
    position: absolute;
    top: 60%;
    width: 20%;
cursor:pointer;
}
.questionmark
{
background: url("bat_icons1.png") no-repeat -79px -157px;
    width: 20px;
    height: 20px;
}
li div
{
padding-right:15px;

}
.bellicon
{
background: url("bat_icons1.png") no-repeat -41px -157px;
    width: 17px;
    height: 20px;
}
.downarrow
{
background: url("bat_icons1.png") no-repeat -139px -308px;
    width: 11px;
    height: 6px;
}
#menu1
{
color:#9d9d9d;
}
.paragraph
{
color:grey;
font-size:13px;
}
.article
{

           box-shadow: 1px 1px 10px #cac4c9;
        width:460px; 
        height:220px;
        padding-top:2px;
}
.flag
{
background: url("bat_icons1.png") no-repeat -43px -597px;
    width: 10px;
    height: 15px;
}
.flag:hover
{
cursor:pointer;
}
.pin
{
background: url("bat_icons1.png") no-repeat -43px -253px;
    width: 13px;
    height: 14px;
}
.pin:hover
{
background: url("bat_icons1.png") no-repeat -82px -253px;
    width: 13px;
    height: 14px;
    cursor:pointer;
}
.dots
{
background: url("bat_icons1.png") no-repeat -39px -213px;
    width: 23px;
    height: 5px;
}
.dots:hover
{
background: url("bat_icons1.png") no-repeat -78px -213px;
    width: 23px;
    height: 5px;
    cursor:pointer;
}

  </style>

</head>
<body>
<div class="container" style="width:100%; margin-left:-10px;">


    <div class="col-md-3" id="sidenav">
    <div class="logo" style="margin-left:15%">
    </div>
    <hr id="hr1">
    <button type="button" class="btn btn-primary" id="button1"><strong>Post an Activity</strong></button>
    <ul style="list-style:none; margin-top:8%">
  <li><div class="request"></div><div class="links" style="position: absolute;left: 39%;top: 26%;">Request</div></li>
  <li><hr></li>
  <li><div class="reports"></div><div  class="links" style="position: absolute;left: 39%;top: 32%;">Reports</div></li>
  <li><hr></li>
  <li><div class="administrator"></div><div  class="links" style="position: absolute;left: 39%;top: 38.2%">Administrator</div></li>
  <li><hr></li>
  <li><div class="weblinks"></div><div  class="links" style="position: absolute;left: 39%;top: 44.2%;">Web links</div></li>
 <li><hr></li>
  <li><div class="subscription"></div><div  class="links" style="position: absolute;left: 39%;top: 50.2%">Subscription</div></li>
</ul>
<div style="height:446px;">
<h4 id="trendings">Trendings</h4>
<div class="hastags">
<p class="hash">#new generation product</p>
<p class="hash">#harm reduction</p>
<p class="hash">#philip morris international</p>
<p class="hash">#imperial tobacco</p>
</div>
</div>
    </div>

    <div class="col-md-9" id="topnav">
     <form>
    <div class="form-group">
    <input type="text" class="form-control" id="Input1" placeholder="Search Activity by brand & company" style="width:58.3%">
    <input type="text" class="form-control" id="Input2" placeholder="In which market" style="width:25%">
    </div>
    <button type="button" class="btn" id="searchbutton">Search</button>
  </form>
<div class="topnavlinks">
  <strong style="color: #0c3274;font-size: 18px;">Activity</strong>
  <strong style="color: #0c3274;font-size: 18px;"> | </strong>
 <strong id="abc" > Analytics </strong>
  </div>
  <div class="topnavright" style="float:right; margin-right:16%; cursor:pointer;">
<ul style=" list-style:none;"> 
<li style="float:right;"><div class="downarrow" style="position: absolute;top: 65%;right:0%">


  </div></li>
 <li style="float:right;"><div class="bellicon" style="position: absolute;top: 60%;right:10%">


  </div></li>

  <li style="float:right;"><div class="questionmark" style="position: absolute;top: 60%;">


  </div></li>
  <li><div class="dropdown">
    <button class="btn btn-default dropdown-toggle" type="button" id="menu1" data-toggle="dropdown" style="position: absolute;right: 27px;top: 41px;">Recent Activities
    <span class="caret"></span></button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="menu1" >
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">HTML</a></li>
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">CSS</a></li>
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">JavaScript</a></li>
      <li role="presentation" class="divider"></li>
      <li role="presentation"><a role="menuitem" tabindex="-1" href="#">About Us</a></li>
    </ul>
  </div></li>
  </ul>
 </div>
    <hr style="margin-top: 13.5%;">
    <div id="scroll">
    <div class="feed">
  <div class="article"  >

    <div style="margin:2%"><h4 style="color:#0c3274; margin-top:1%"><strong>New Generaion Product Launced</strong></h4><span><p class="text-muted" style="float:right; margin-top:-6.5%;">March 16, 2017</p></span>
    <h6 style="color:orange; margin-top:5%; margin-bottom:6%"><strong>Brand Launch</strong></h6>
    <div class="paragraph"><p>The new variant of its best selling brand classic with the tag</p> 
    <p>low smell attached to it. The lastest varient of classic comes in blue</p>
    <p>packs and is made of ... <span><a href="#">Show more</a></span></p></div>
    <div style="margin-top:6%"><h6 style="color:orange"><strong>Japan | American Spirit</strong></h6></div>
    <ul style="list-style:none;    margin-top: -8%;">
    <li style="float:right;  padding:5px;"><div class="dots"></div></li>
        <li style="float:right;  padding:5px;"><div class="pin"></div></li>
    <li style="float:right;  padding:5px;"><div class="flag"></div></li>


    </ul>
    </div>
    </div>
  </div>
  </div>
  </div>
  </div>

</div>



</body>
</html>

使用相对于位置元素的边距或位置

4 个答案: