“删除”行HTML

Question

我正在建立一个网站并且遇到一个非常有问题的问题。浏览器窗口的所有宽度都有一条线。它是固定的（位置：固定）。它上面有一个小区域。效果的一点是，在联系到该行后，某些内容应该被“删除”。所以它上面的区域显示的不是所有块，而是由我指定。例如，有带填充等的黄色块。它还有一个带文本或图像的小绿色块。因此，在该行之上，它应该只是没有绿色的黄色块。我尝试使用相对定位和z索引来解决这个问题。但我无法想象我怎么能得到它，因为总有一些“层”，而不仅仅是一个图片，就像在例子中一样。如果它只是一个块我很容易想到。 我做了一个简单的例子向你展示。请看一下。 这是一张提供更多理解的图片。想象一下，它就是你所有的窗口，当你向下滚动/顶部蓝色块消失/出现。只有蓝色块。 Picture.

    body{
    margin:0px;
    padding:0px;
    }
    .main{
    background-color:#FF6600; 
    padding:200px 0px 0px;
    }
    .fix{
    position:fixed;
    background-color:#FF6600; 
    border-bottom:2px solid black;
    height:200px;
    width:100%;
    top:0px;
    left:0px;
    z-index: 2;
    }
    .container{
    padding: 50px;
    background-color: yellow;
    }
    .block{
    background-color: green;
    }
    .big_pic{
    z-index:2;
    position:relative
    }
    .absolute{
    position:absolute;
    top: 70%;
    z-index: 1;
    } 

<div class="main">
    <div class="fix">
    </div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non est sit amet tellus blandit cursus at tincidunt ex. Etiam arcu ante, cursus sed lectus eu, vehicula maximus quam. Nam vel quam porta, pretium leo vel, tristique velit. Quisque ut arcu sit amet quam imperdiet rutrum. Ut volutpat pharetra felis, ac dictum urna blandit ac. Suspendisse facilisis ullamcorper molestie.
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non est sit amet tellus blandit cursus at tincidunt ex. Etiam arcu ante, cursus sed lectus eu, vehicula maximus quam. Nam vel quam porta, pretium leo vel, tristique velit. Quisque ut arcu sit amet quam imperdiet rutrum. Ut volutpat pharetra felis, ac dictum urna blandit ac. Suspendisse facilisis ullamcorper molestie.</p>    

    <div class="container"> 
    <div class="block">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non est sit amet tellus blandit cursus at tincidunt ex. Etiam arcu ante, cursus sed lectus eu, vehicula maximus quam. Nam vel quam porta, pretium leo vel, tristique velit. Quisque ut arcu sit amet quam imperdiet rutrum. Ut volutpat pharetra felis, ac dictum urna blandit ac. Suspendisse facilisis ullamcorper molestie. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non est sit amet tellus blandit cursus at tincidunt ex. Etiam arcu ante, cursus sed lectus eu, vehicula maximus quam. Nam vel quam porta, pretium leo vel, tristique velit. Quisque ut arcu sit amet quam imperdiet rutrum. Ut volutpat pharetra felis, ac dictum urna blandit ac. Suspendisse facilisis ullamcorper molestie.</p>    
    </div>
    </div>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non est sit amet tellus blandit cursus at tincidunt ex. Etiam arcu ante, cursus sed lectus eu, vehicula maximus quam. Nam vel quam porta, pretium leo vel, tristique velit. Quisque ut arcu sit amet quam imperdiet rutrum. Ut volutpat pharetra felis, ac dictum urna blandit ac. Suspendisse facilisis ullamcorper molestie. Nam facilisis elit eu neque sodales fringilla. Morbi laoreet, ex sit amet sagittis congue, risus lorem tempor eros, pulvinar semper sem nunc non erat. Phasellus posuere metus lacus, sit am et sollicitudin purus pulvinar et. Curabitur diam arcu, viverra a magna at, faucibus imperdiet eros. Quisque eros metus, posuere in bibendum eget, mattis eget nisl.et sollicitudin purus pulvinar et. Curabitur diam arcu, viverra a magna at, faucibus imperdiet eros. Quisque eros metus, posuere in bibendum eget, mattis eget nisl.
    <img class="big_pic" src="http://katyaburg.ru/sites/default/files/pictures/krasota_prirody/krasivye_cvety_rozy_kartinki_foto_05.jpg">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent non est sit amet tellus blandit cursus at tincidunt ex. Etiam arcu ante, cursus sed lectus eu, vehicula maximus quam. Nam vel quam porta, pretium leo vel, tristique velit. Quisque ut arcu sit amet quam imperdiet rutrum. Ut volutpat pharetra felis, ac dictum urna blandit ac. Suspendisse facilisis ullamcorper molestie. Nam facilisis elit eu neque sodales fringilla. Morbi laoreet, ex sit amet sagittis congue, risus lorem tempor eros, pulvinar semper sem nunc non erat. Phasellus posuere metus lacus, sit am et sollicitudin purus pulvinar et. Curabitur diam arcu, viverra a magna at, faucibus imperdiet eros. Quisque eros metus, posuere in bibendum eget, mattis eget nisl. et sollicitudin purus pulvinar et. Curabitur diam arcu, viverra a magna at, faucibus imperdiet eros. Quisque eros metus, posuere in bibendum eget, mattis eget nisl.

    Nullam dui libero, gravida id dui ac, pellentesque gravida justo. Quisque id dolor non nunc scelerisque varius a malesuada felis. Duis aliquam malesuada tortor, quis laoreet lacus vestibulum ut. Sed a vestibulum nunc, in maximus magna. Donec vel ante in nisi volutpat venenatis quis sit amet purus. Nunc eget posuere tortor. Donec in mi lectus. Mauris iaculis aliquet orci, at condimentum ligula bibendum et. Cras egestas metus a pellentesque malesuada. Etiam et imperdiet arcu, nec gravida massa. Sed maximus, lorem a dignissim faucibus, lorem neque laoreet elit, ut scelerisque augue ex et odio. Suspendisse ut pretium magna, sed elementum neque. Donec efficitur lectus vitae erat gravida fringilla et vel ante. Sed consectetur, odio vel venenatis mattis, nisl felis dapibus quam, eget ultrices augue nisi quis sapien.
</div>

Answer 1

如果我理解你的正确，你需要从var map = L.map('map_2385853'); googleStreets = L.tileLayer('http://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}',{ maxZoom: 20, subdomains:['mt0','mt1','mt2','mt3'] }).addTo(map); map.locate({setView: true, maxZoom: 16, watch:true, timeout: 60000 }); function onLocationFound(e) { var radius = e.accuracy / 2; var marker; var circles; marker = new L.Marker(e.latlng, {draggable:true}); circles = new L.circle(e.latlng, radius); //var pop = new bindPopup("You are within " + radius + " meters from this point").openPopup(); map.eachLayer(function (layer) { map.removeLayer(marker); map.removeLayer(circles); }); map.addLayer(marker); map.addLayer(circles); } map.on('locationfound', onLocationFound); 类

中删除边框

＆＃13;

＆＃13;

.fix

＆＃13;

html, body{
  margin:0;
  padding:0;
}
.main{
background-color:#FF6600; 
padding:200px 0px 0px;
}
img{
  max-width: 100%;
}
.fix{
position:fixed;
background-color:#FF6600; 
/*border-bottom:2px solid black;*/
height:150px;
width:100%;
top:0px;
left:0px;
z-index: 10;
}
.container{
padding: 50px;
background-color: yellow;
}
.block{
background-color: green;
}
.big_pic{
z-index:2;
position:relative
}
.absolute{
position:absolute;
top: 70%;
z-index: 1;
}

＆＃13;

＆＃13;

＆＃13;