Css svg仪表的响应定位_Css_Svg_Position_Css Position

Css svg仪表的响应定位

css svg

Css svg仪表的响应定位,css,svg,position,css-position,Css,Svg,Position,Css Position,我正在尝试定位两个SVG图像（Tobias-Raketfart.SVG class=“turbotobias shake turbotobias rocket img”和turbotobias-Blue-clouds.SVG class=“turbotobias smoke”）。每次我提出一个解决方案，它是远远没有反应我一直在玩弄位置：绝对；然后用底部和右侧定位。这使得结果在我的PC显示器上看起来不错，但在几乎任何其他屏幕上都很糟糕。如何定位这两个SVG图像 HTML: <body&

我正在尝试定位两个SVG图像（Tobias-Raketfart.SVG class=“turbotobias shake turbotobias rocket img”和turbotobias-Blue-clouds.SVG class=“turbotobias smoke”）。每次我提出一个解决方案，它是远远没有反应

我一直在玩弄位置：绝对；然后用底部和右侧定位。这使得结果在我的PC显示器上看起来不错，但在几乎任何其他屏幕上都很糟糕。如何定位这两个SVG图像

HTML:

<body>
    <div class='turbotobias-hero-section-wrapper'>
        <div class='turbotobias-row'>
            <div class='turbotobias-column'>
                <div class='turbotobias-first-column'>
                    <h1 class="turbotobias-fp-h1">Vil du have
                        <div class="turbotobias-h1-enhanced">raketfart</div>
                        <div class="turbotobias-h1-smaller">på din hjemmeside?</div>
                    </h1>
                    <span class="turbotobias-sub-h1">Jeg ta'r din hjemmeside til skyerne!</span>
                </div>
            </div>
            <div class='turbotobias-column'>
                <div class='turbotobias-second-column'>
                    <img src="https://turbotobias.dk/wp-content/uploads/2019/07/Turno-Tobias-Raketfart.svg" alt="" class="turbotobias-shake turbotobias-rocket-img">
                    <img src="https://turbotobias.dk/wp-content/uploads/2019/07/TurboTobias-Blue-clouds.svg" alt="" class="turbotobias-smoke"></img>
                </div>
            </div>
            <div class="turbotobias-divider-clouds"></div>
        </div>
    </div>
</body>

body {
  background: #fff;
  color: #333333;
  margin: 0;
  box-sizing: border-box;
  font-family: open sans,Arial,sans-serif;
  font-size: 14px;
  overflow: hidden;
  word-break: break-word;
}

.turbotobias-hero-section-wrapper {
  height: 100vh;
  background: url(https://turbotobias.dk/wp-content/uploads/2019/07/Light-Above-clouds-HD-TurboTobias.jpg);
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
}

.turbotobias-column .turbotobias-first-column {
  display: flex;
  align-self: center;
  align-items: center;
  flex-direction: column;
}

.turbotobias-first-column {
  font-weight: 700;
  text-transform: uppercase;
  background-color: rgba(0,0,0,0);
  border-left-width: 10px;
  border-left-style: solid;
  border-left-color: #0082a4;
  padding-top: 20px!important;
  padding-bottom: 20px!important;
  padding-left: 20px!important;
  margin-top: 0px!important;
  display: flex;
  align-items: center;
}

.turbotobias-h1-enhanced {
  font-weight: 900;
  font-size: 120%;
}

.turbotobias-h1-smaller {
  font-size: 70%;
}

@media (min-width: 980px) {
h1.turbotobias-fp-h1 {
  padding-bottom: 0px;
  margin-bottom: 0px;
  margin-top: 0px;
  font-weight: 700;
  font-size: 60px !important;
  color: #303030!important;
  line-height: 1em;
  text-transform: uppercase;
}
}

@media (max-width: 979px) {
  h1.turbotobias-fp-h1 {
      padding-bottom: 0px;
      margin-bottom: 0px;
      margin-top: 0px;
      font-weight: 700;
      font-size: 33px !important;
      color: #303030!important;
      line-height: 1em;
      text-transform: uppercase;
  }
  }

.turbotobias-sub-h1 {
  font-size: 24px;
  color: #303030;
  font-weight: 400;
  font-family: open sans,Arial,sans-serif;
  text-transform: uppercase;
  text-align: left;
}

.turbotobias-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  width: 80%;
  max-width: 1080px;
  height: 100vh;
  margin: auto;
}

.turbotobias-column {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
}

.turbotobias-smoke {
  position:absolute;
  bottom: 0;
  width: 470px;
  height: auto;
  z-index: 9;
  right: 30%;
}

.turbotobias-rocket-img {
  position: absolute;
  bottom: 30%;
  right: 36%;
  width: 180px;
  height: auto;
  z-index: 11;
}

.turbotobias-divider-clouds {
  background-image: url(https://turbotobias.dk/wp-content/uploads/2019/07/clouds-divider.svg);
  background-size: cover;
  background-position: center top;
  bottom: 0;
  left: 0;
  height: 100px;
  position: absolute;
  width: 100%;
  z-index: 10;
}


@media screen and (min-width: 800px) {
  .turbotobias-column {
  align-self: center;
    flex: 1
  }
}

@media (max-width: 980px) {
  .turbotobias-row {
      padding: 30px 0;
  }
}

已经做了一些更改。问题是，为什么云没有出现Light-over-clouds-HD-TurboTobias.jpg 带有类

turbotobias第二列的Div应该始终位于两个svg的中心，并且您应该只控制它

正文{
背景：#fff；
颜色：#333333；
保证金：0；
字体系列：开放式sans、Arial、sans serif；
字体大小：14px；
溢出：隐藏；
}
.turbotobias hero段包装器{
高度：100vh；
背景：url(https://turbotobias.dk/wp-content/uploads/2019/07/Light-Above-clouds-HD-TurboTobias.jpg);
背景尺寸：封面；
背景附件：固定；
背景重复：无重复；
}
.turbotobias第一列{
文本转换：大写；
左边框：10px实心#0082a4；
填充：20px 0 20px 20px；
边际上限：0；
字号：700；
}
@介质（最大宽度：799px）{
.turbotobias第一列{
文本对齐：居中；
}
}
.turbotobias-fp-h1{
利润率：0.20px0；
字体大小：calc（12px+2vw）；
字号：600；
线高：90%；
}
.turbotobias-h1-增强型{
字体大小：calc（24px+2vw）；
字号：900；
线高：100%；
}
.turbotobias-h1-小型{
字体大小：calc（17px+1vw）；
字号：600；
}
.turbotobias-sub-h1{
字体大小：calc（14px+0.5vw）；
字体大小：400；
}
.turbotobias-sub-h1{
颜色：303030；
}
图博托比亚斯街{
显示器：flex；
弯曲方向：行；
柔性包装：包装；
宽度：80%；
最大宽度：1080px；
高度：100vh；
保证金：自动；
}
.turbotobias柱{
显示器：flex；
弯曲方向：立柱；
弹性基准：100%；
}
.turbotobias第二列{
显示器：flex；
证明内容：中心；
最大宽度：470像素；
保证金：自动；
}
.涡轮托拜厄斯火箭img{
底部：30%；
宽度：180px；
高度：自动；
z指数：11；
}
.涡轮托比亚斯烟{
位置：绝对位置；
底部：0；
最大宽度：470像素；
高度：自动；
z指数：9；
}
涡轮托比亚斯摇{
动画：摇动2s无限立方贝塞尔（0.79,0.04,0.39,0.81）两者；
变换：translate3d（0,0,0）；
背面可见性：隐藏；
透视图：1000px；
}
@介质（最大宽度：790px）{
.涡轮托拜厄斯火箭img{
z指数：2；
最大宽度：420px；
}
}
@关键帧抖动{
10%,
90% {
转换：translate3d（-1px，0，0）；
}
20%,
80% {
变换：translate3d（1px，0，0）；
}
30%,
50%,
70% {
变换：translate3d（-2px，0，0）；
}
40%,
60% {
变换：translate3d（2px，0，0）；
}
}
.涡轮托拜厄斯分隔云{
背景图片：url(https://turbotobias.dk/wp-content/uploads/2019/07/clouds-divider.svg);
背景尺寸：封面；
背景位置：中上；
底部：0；
左：0；
高度：100px；
位置：绝对位置；
宽度：100%；
z指数：10；
}
@介质（最小宽度：800px）{
.turbotobias柱{
自对准：居中；
弹性：1
}
}
@介质（最大宽度：980px）{
图博托比亚斯街{
填充：30px0；
}
}

杜哈维
放屁
pådin hjemmeside？
直到天空！
进行了一些更改。问题是，为什么云没有出现Light-over-clouds-HD-TurboTobias.jpg
带有类turbotobias第二列的Div应该始终位于两个svg的中心，并且您应该只控制它

正文{
背景：#fff；
颜色：#333333；
保证金：0；
字体系列：开放式sans、Arial、sans serif；
字体大小：14px；
溢出：隐藏；
}
.turbotobias hero段包装器{
高度：100vh；
背景：url(https://turbotobias.dk/wp-content/uploads/2019/07/Light-Above-clouds-HD-TurboTobias.jpg);
背景尺寸：封面；
背景附件：固定；
背景重复：无重复；
}
.turbotobias第一列{
文本转换：大写；
左边框：10px实心#0082a4；
填充：20px 0 20px 20px；
边际上限：0；
字号：700；
}
@介质（最大宽度：799px）{
.turbotobias第一列{
文本对齐：居中；
}
}
.turbotobias-fp-h1{
利润率：0.20px0；
字体大小：calc（12px+2vw）；
字号：600；
线高：90%；
}
.turbotobias-h1-增强型{
字体大小：calc（24px+2vw）；
字号：900；
线高：100%；
}
.turbotobias-h1-小型{
字体大小：calc（17px+1vw）；
字号：600；
}
.turbotobias-sub-h1{
字体大小：calc（14px+0.5vw）；
字体大小：400；
}
.turbotobias-sub-h1{
颜色：303030；
}
图博托比亚斯街{
显示器：flex；
弯曲方向：行；
柔性包装：包装；
宽度：80%；
最大宽度：1080px；
高度：100vh；
保证金：自动；
}
.turbotobias柱{
显示器：flex；
弯曲方向：立柱；
弹性基准：100%；
}
.turbotobias第二列{
显示器：flex；
证明内容：中心；
最大宽度：470像素；
保证金：自动；
}
.涡轮托拜厄斯火箭img{
底部：30%；
宽度：180px；
高度：自动；
z指数：11；
}
.涡轮托比亚斯烟{
位置：绝对位置；
底部：0；
最大宽度：470像素；
高度：自动；
z指数：9；
}
涡轮托比亚斯摇{
动画：摇动2s无限立方贝塞尔（0.79,0.04,0.39,0.81）两者；
变换：translate3d（0,0,0）；
背面可见性：隐藏；
透视图：1000px；
}
@介质（最大宽度：790px）{
.涡轮托拜厄斯火箭img{
z指数：2；
最大宽度：420px；
}
}
@关键帧抖动{
10%,
90% {
转换：translate3d（-1px，0，0）；
}
20%,
80% {
变换：translate3d（1px，0，0）；
}
30%,
50%,