你如何使元素不改变其他元素

时间:2015-01-19 15:17:17

标签: html css

假设我有一个浮动到右上方的图像,我怎样才能让所有其他元素忽略它并像那里没有任何东西一样通过它?它是透明的,文本应该能够通过图像到达行的末尾而不是在图像的左侧结束。这怎么可能,如果可以,不使用JavaScript就可以完成?

2 个答案:

答案 0 :(得分:1)

您可以通过以下方式使用relativeabsolute定位的组合:

  1. 相对定位包含文字
  2. P元素
  3. 绝对将img置于其中。
  4. 
    
    div {
        position: relative;
    }
    p {
        position: relative;
        z-index: 2;
    }
    img {
        position: absolute;
        right: 0;
        top:0;
        z-index: 1;
    }
    
        
    <div>
        <img src="http://placehold.it/300x150">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam turpis dui, mattis nec nisi eu, rhoncus bibendum magna. Cras dignissim ante eget elit imperdiet, nec egestas lorem hendrerit. Vivamus non fringilla ex. Nulla lobortis risus massa, a pulvinar lacus ultrices nec. Vivamus sed viverra nunc. Quisque eget massa tellus. Fusce mattis, nisl quis consequat mollis, dui tortor consequat nisl, vitae vestibulum arcu lectus quis lacus. Vestibulum fringilla facilisis tristique. Morbi pellentesque blandit tristique. Ut tortor elit, rhoncus vitae maximus at, mollis sed lacus. Maecenas faucibus metus et tortor aliquam, nec aliquet ante hendrerit.
    
    Sed non commodo odio. Phasellus nec lacus in ipsum tincidunt suscipit non vitae augue. Sed ultrices enim a eros sodales laoreet. Integer quis nisl congue, lacinia leo ut, vulputate ex. Fusce lacinia faucibus purus, vitae consequat orci cursus ac. Sed pharetra ac turpis id posuere. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nec ligula tortor. Vestibulum rhoncus felis quis dictum mattis. Donec gravida vestibulum pulvinar.
    
    Vestibulum pellentesque iaculis leo. Donec at tincidunt ligula, non placerat metus. Fusce aliquam vel risus quis egestas. Suspendisse nec vestibulum tellus. Pellentesque rhoncus quam et blandit condimentum. Ut vitae neque tempor, molestie lectus at, feugiat ipsum. Integer suscipit dui ut dolor interdum laoreet. Integer pharetra lectus ut rutrum fringilla. Sed sed mauris posuere, lobortis ipsum id, aliquet orci. Nam in felis egestas, mattis dolor id, vulputate dolor. Nunc venenatis risus dolor, id tempor ipsum suscipit in. In scelerisque libero justo, sed euismod dolor hendrerit non. Curabitur mattis orci ac massa mollis, vel suscipit velit lobortis. Praesent semper, elit eu auctor congue, risus erat semper tellus, quis dignissim felis massa eu ante. Ut laoreet metus ligula. Quisque dictum sem et ultricies fringilla.
    
    Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus maximus pulvinar odio in lacinia. Maecenas dapibus leo vel sollicitudin scelerisque. Vivamus aliquam eleifend lorem eget dignissim. Praesent egestas convallis convallis. Suspendisse mollis metus quam. In scelerisque turpis sapien, luctus faucibus turpis accumsan at. Praesent consectetur malesuada sapien, ac viverra massa semper sed. Nunc a urna eleifend, sollicitudin lacus eu, tristique sapien. Sed et ipsum sit amet sem ornare sagittis vel quis ante. Nunc tincidunt eros quis massa porttitor, ac consectetur nibh venenatis. Vivamus condimentum lacus at ornare dictum. Aenean nec tempus felis. Ut facilisis ornare mauris, id pulvinar nunc posuere quis. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
    
    Praesent vitae pellentesque orci. Quisque dignissim ex id pellentesque dignissim. Maecenas auctor elit et luctus mattis. Sed lacus justo, varius ac magna vel, lacinia varius odio. Curabitur vestibulum vitae felis a viverra. Praesent faucibus arcu eros. Morbi eleifend nisl non blandit varius. Nulla pellentesque ipsum et nulla mollis placerat. Praesent accumsan ipsum at nulla ultricies vehicula.</p>
    </div>
    &#13;
    &#13;
    &#13;

答案 1 :(得分:0)

对元素使用absolute定位,并在其父元素上使用相对定位来建立初始containing block