svg元素的绝对定位不起作用答案

【问题标题】：Absolute positioning of svg element not workingsvg元素的绝对定位不起作用
【发布时间】：2017-02-02 05:27:47
【问题描述】：

我尝试设置一条 svg 线，以便在所有设备上删除屏幕。在移动设备和屏幕较小的计算机上，这条线会被切断，就像我图片中的底部示例一样。

我试图将<svg> 元素设置为具有绝对位置，但只是将其放在<div> 中会改变它，甚至没有给该div 任何css 样式。有什么建议吗？

Fiddle here

【问题讨论】：

标签： html css svg

【解决方案1】：

您需要将 svg 元素包装在绝对位于您希望它“穿透”的主要区域 (.sec1) 内的 div (.svg-container) 中。然后需要对主要区域应用一个相对位置，以便包装器 div 知道相对于何处定位自身：

HTML

<div class="sec1">
  <div class="svg-container">
   <svg height='100%' width='100%' xmlns='http://www.w3.org/2000/svg'>
    <line stroke='#5AB1BB' stroke-width='2' x1='0' x2='10000' y1='0' y2='10000'></line></svg>
  </div>
  <div class="w3-container">
    <div class="maintitlesection">
      <div class="title">
        William Stinson
      </div>
      <p>Computers, graphics, photo and video (and lots more).</p>
    </div>
  </div>
</div>

CSS

.sec1 {
  position: relative;
}

.svg-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.maintitlesection {
  position: absolute;
  width: 300px;
  right: 30px;
}

Here's a fiddle

【讨论】：

@WilliamStinson 这是因为.w3-container 在两个部分中都使用了。请参阅我更新的答案，其中我们仅将样式应用于 .maintitlesection 以使其显示在右侧。
谢谢。你拯救了这一天。