Question

我的屏幕左边有一个固定的div，我想在那里放置类别，在它附近我想再放2个其他div，第一个更广泛，第二个，并且它们都是向左漂浮，但问题是2个div与固定的div相交，我不想那样，我怎么能解决这个问题呢？我在这里做了一个小提琴： https://jsfiddle.net/rn11jxh2/

HTML：

<div id="meniu">
     <div id="cat" >
      <div class="catico">
        <img src="img/Categories.png"/>
      </div>
         <div class="cattext">
          Categories:
         </div>
      </div>
      <ul> 

            <li>sdncsldncsd </li>
    <li>sdncsldncsd </li><li>sdncsldncsd </li><li>sdncsldncsd </li><li>sdncsldncsd </li><li>sdncsldncsd </li><li>sdncsldncsd </li>



      </ul>       

    </div>
   <div id="invitapemail">

              </div>




   #invitapemail {
float:left;
position:relative;
height:200px;
width:620px;
right:30px;
background-color:white;
border:2px solid #797979;
border-radius:1em;
padding:10px;
margin-top:10px;
font-family:Verdana, Geneva, sans-serif;
font-size:1.2em;
color:#797979;
z-index:2; 
}
#meniu{
 position:fixed;
 height:420px;
 width:140px;
 line-height:30px;
 font-size:1.15em;
 margin-left:0px;
 padding-right:75px;
 padding-left:30px;
 text-decoration:none;}

Answer 1

这是预期的行为。 app.directive('addComment', function() { return { restrict: 'A', require: 'ngModel', priority: 1, link: function ($scope, element, attrs, ngModel) { element.on("click", function(event){ event.preventDefault(); console.log(ngModel.$modelValue); $scope.comments.push(angular.copy(ngModel.$modelValue)); }); } } });从文档流中删除元素。这意味着它将忽略其他元素，就好像它们甚至不存在一样，这可能会导致重叠。 position:fixed正在将您的内容转移到左侧，就好像固定菜单不在那里一样。

您可以设置float:left以按菜单的宽度+填充来偏移元素，在这种情况下，它看起来像200px：https://jsfiddle.net/rn11jxh2/1/

您可以在此处详细了解定位和花车：https://css-tricks.com/all-about-floats/

为什么浮动的左侧div与左侧固定的div相交？

1 个答案: