Блог

Главная - Вопросы по программированию - Как я могу поместить дочерний div в верхний левый угол документа. даже выше уровня родителей?

Как я могу поместить дочерний div в верхний левый угол документа. даже выше уровня родителей?

#html #css

Вопрос:

Я сделал 3 колонки с помощью фреймворка начальной загрузки. Во второй колонке есть div с некоторым текстом. Я хотел бы переместить этот div в верхний левый угол документа (а не в верхний левый угол родительского).

Я не могу просто добавить div над столбцами или добавить jquery или javascript, потому что я использую другое программное обеспечение. Он очень строгий, и я могу добавить в него только пользовательский CSS.

Вот вам пример. Фиолетовый div должен быть на месте стрелки влево: Вот вам пример. Фиолетовый div должен быть на месте стрелки влево

Я попробовал абсолютную позицию, но безуспешно. Код:

 <!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="./example.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container-fluid">
  <h1>Hello World!</h1>
  <p>Resize the browser window to see the effect.</p>
  <p>The columns will automatically stack on top of each other when the screen is less than 768px wide.</p>
  <div class="row">
    <div class="col-sm-4"><h3>Title 1 - col-sm-4</h3></div>
    <div class="col-sm-4" style="background-color:lavenderblush;">
        <div class="section-topleft">
            <h3>This div should be on the top left corner of the document</h3>
        </div>
        <h3>Title 2 - col-sm-4</h3></div>
    <div class="col-sm-4" style="background-color:lavender;"><h3>Title 3 - col-sm-4</h3></div>
  </div>
</div>

</body>
</html>
 
 .section-topleft{
    position: absolute;
    background-color: purple;
    color: #ffffff;
    width: 100%;
    height: 100px;
    top: 0;
    left: 0;
}

Я также не хочу, чтобы позиция: исправлена. Мне действительно любопытно, возможно ли это вообще. Если это невозможно, это тоже нормально.

В реальном примере это еще не работает

Здесь вы можете увидеть css div с классом «тест». Div, который должен быть размещен в верхнем левом углу

So here is the code of the HTML from the 3rd row (relevant html):

 <div class="row">
    <div class="col-md-3 hidden-xs hidden-sm">
      <!-- Nav (Logged in) -->
          <div class="main-logo">
            <a href="https://google.com">
            <img src="https://leaddyno-client-images.s3.amazonaws.com/c5204ac1a6274432acd0d657ad3679ea55f93d49/df60389c3caec18e6d856beca7c8_logo_black.png">
            </a>
          </div>
        <div class="navi-left">
            <ul>
    <li class="active">
      <a href="/affiliate">
        <span id="affiliate-nav-homepage"><span class="default">Home Page</span></span>
      </a>
    </li>
      <li>
        <a href="/affiliate/content">
          <span id="affiliate-nav-marketing-materials"><span class="default">Marketing Materials</span></span>
        </a>
      </li>
      <li>
        <a href="/affiliate/analytics">
          <span id="affiliate-nav-analytics"><span class="default">Analytics</span></span>
        </a>
      </li>
      <li>
        <a href="/affiliate/invite">
          <span id="affiliate-nav-invite-others"><span class="default">Invite Others</span></span>
        </a>
      </li>
      <li>
        <a href="/affiliate/children">
          <span id="affiliate-nav-your-network"><span class="default">Your Network</span></span>
        </a>
      </li>
      <li>
        <a href="/affiliate/subids">
          <span id="affiliate-nav-sub-ids"><span class="default">SubIDs/Channels</span></span>
        </a>
      </li>
      <li>
        <a href="/affiliate/landing_pages">
          <span id="affiliate-nav-landing-pages"><span class="default">Landing Pages</span></span>
        </a>
      </li>
      <li>
        <a href="/affiliate/commission_details">
          <span id="affiliate-nav-commission-details"><span class="default">Commissions</span></span>
        </a>
      </li>
  </ul>

  <ul class="navi-mobile-lower">
      <li>
        <i>
          <hr>
        </i>
      </li>

      <li>
        <a href="/affiliate/create_password">Create Password</a>
      </li>
      <li>
        <a href="/affiliate/account_email">Update Account Email</a>
      </li>
      <li>
        <a href="/affiliate/update_paypal">Update Paypal Email</a>
      </li>
    <li>
      <a href="/ext/affiliates/sign_out">Log Out</a>
    </li>
  </ul>

        </div>
    </div>
    <div class="col-md-9">
      <div class="main-content">

        <!-- header -->
          <div class="custom-header">
            <div class="default-title" id="default-title">
                <figure><img src="https://leaddyno-client-images.s3.amazonaws.com/c5204ac1a6274432acd0d657ad3679ea55f93d49/374c2ace96edb5866ba9e7aa079bbc202232c4e8_Brand advocates banner (3).png" data-image="foo"></figure>
            </div>
          </div>


            <div>
              <div class="v2-alerts">
                

              </div>
              <div class="row">

  <div class="col-md-3" style="
    position: static;
">
    <div class="left-panel">
      <div>
        <div class="test">
<h1>test</h1>
</div>






<p>We are excited to have you as part of the studio team!</p>
      </div>
    </div>
  </div>

  <div class="col-md-9">
    <div class="right-panel">


            <div id="sharing-div">
              


  <div class="sharing-section top-to-bottom">
    <div class="row">
      <div class="col-md-12">

        <div class="title">
          <span id="affiliate-link-title"><span class="default">Your Referral Link</span></span>
        </div>


          <div class="aff-link">
          <span><i>
            http://studio.com?afmc=1b
          </i></span>
          </div>
          <div class="row">
            <div class="col-md-12">
              <div>

                <div class="pull-right">
                  <a class="copy-link" data-clipboard-text="http://studio.com?afc=1b">copyamp;nbsp;link</a>
                </div>

        </div>
        </div>
        </div>
      </div>
    </div>
  </div>



<div class="sharing-section top-to-bottom">
  <div class="row">
    <div class="col-md-12">
      <div class="title">
        <span id="primary-social-links-title"><span class="default">your primary social links</span></span>
        <div class="pull-right">
          <a href="/affiliate/content">view all links</a>
        </div>
      </div>
    </div>
    </div>
    <div class="row">
    <div class="col-md-12">
      <div class="links">
          <div class="share-btn">
            <a data-share-type="email" data-link-id="9937727" href="/share/email">
              <div>
                <img src="/assets/primary-email-c415b75ea87907f28155ecb8b66b5fc42686c773f6315e8a9151d8b61dbe385c.png">
              </div>
              Email
            </a>
          </div>
          <div class="share-btn">
            <a href="/share/facebook" target="_blank" data-share-type="facebook" data-link-id="9937727">
              <div>
                <img src="/assets/primary-facebook-70e1f3176145c920e2423ffe0c06a15eece6e56cd51172582ea4d5571e0b0ab3.png">
              </div>
              Facebook
            </a>
          </div>
          <div class="share-btn">
            <a data-share-type="twitter" data-link-id="9937727" target="_blank" href="/share/tweet">
              <div>
                <img src="/assets/primary-twitter-2130572d07fd2cd1604a59dd16498c4e267ddf5c8ed1a82fcc826f7c6511dee0.png">
              </div>
              Twitter
            </a>
          </div>
          <div id="whatsapp_share" class="share-btn">
            <a data-share-type="whatsapp" data-link-id="9937727" target="_blank" href="/share/whatsapp">
              <div>
                <img src="/assets/primary-whatsapp-283a25d6a61b76686118d7f2f5866a0ba21c520ff4404a3b248523b7b7d396bd.png">
              </div>
              Whatsapp
            </a>
          </div>
          <div id="text_share" class="share-btn">
            <a data-share-type="text" data-link-id="9937727" target="_blank" href="/share/text">
              <div>
                <img src="/assets/primary-sms-2ee17bddcfbb89a98c68fdcf8282df2e5920c135ebe62595e77dc0cfc6a0622c.png">
              </div>
              Text
            </a>
          </div>
          <div id="linked_in_share" class="share-btn">
            <a data-share-type="linkedin" data-link-id="9937727" target="_blank" href="/share/linkedin">
              <div>
                <img src="/assets/primary-linkedin-5bc3ba7bbfda5051d5d0d82ebc9b397ac17778b21fa7936ba7b0db3bbbc22d92.png">
              </div>
              LinkedIn
            </a>
          </div>
        <div class="share-btn">
          <a ic-action="slideToggle" ic-target="#instagram-sharing-instructions" data-share-type="instagram" data-link-id="9937727" ic-trigger-on="default">
            <div>
              <img src="/assets/primary-instagram-826dae8b5dbccbce3a5a2e4ed0936c96fb6a24e3eb32006f3e5ebf4c51e9dc32.png">
            </div>
            Instagram
          </a>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="row" id="instagram-sharing-instructions" style="display: none;">
  <div class="col-md-12">
    <div class="fs18">
      <span id="affiliate-instagram-sharing-instructions"><span class="default">Instagram Sharing Instructions</span></span>
    </div>
  </div>
  <div class="col-md-12">
    <ol>
      <li>
        <span class="instagram-badge">1</span>
        <a class="copy-link" data-clipboard-text="http://studio.com?afmc=1b">copyamp;nbsp;link</a>
      </li>
      <li>
        <span class="instagram-badge">2</span>
        <a id="instagram-launch" class="" href="https://instagram.com/_n/mainfeed/" target="_blank"><span></span><b>Click here to launch Instagram</b></a>
        <script>
          $(function(){
            if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
              $("#instagram-launch").attr('href', "instagram://");
            } else if(navigator.userAgent.match(/android/i)) {
              $("#instagram-launch").attr('href', "intent://instagram.com/_n/mainfeed/#Intent;package=com.instagram.android;scheme=https;end")
            } else {
              $("#instagram-launch").attr('href', "https://instagram.com/_n/mainfeed/");
              $("#instagram-launch").attr('target', "_blank")
            }
          })
        </script>
      </li>
      <li><span class="instagram-badge">3</span>Paste the link into your Profile, Story or Reels</li>
    </ol>
  </div>
</div>


            </div>

            <!--<div class="divider"></div>-->

            <div>
              <div class="title">
  <span id="your-progress-title"><span class="default">Your Progress</span></span>
</div>

<div class="row">
  <div class="col-md-4 col-sm-4 col-xs-4 aff-progress">
    <div class="aff-progress-digit">
      <b>2</b>
    </div>

    <div class="aff-progress-label">
      <span>
      <span id="affiliate-visitors-title"><span class="default">Friends have visited us</span></span>
    </span>
    </div>
  </div>
  <div class="col-md-4 col-sm-4 col-xs-4 aff-progress">
    <div class="aff-progress-digit">
      <b>0</b>
    </div>

    <div class="aff-progress-label">
      <span>
      <span id="affiliate-sign-up-title"><span class="default">Friends have signed up with us</span></span>
    </span>
    </div>
  </div>
  <div class="col-md-4 col-sm-4 col-xs-4 aff-progress">
    <div class="aff-progress-digit">
      <b>0</b>
    </div>

    <div class="aff-progress-label">
      <span>
      <span id="affiliate-purchase-title"><span class="default">Purchases made by friends</span></span>
    </span>
    </div>
  </div>
</div>

            </div>


            <div class="divider"></div>

            <div>
              <div class="title">
  <span id="affiliate-payments-title"><span class="default">Your Payments</span></span>
</div>

<div class="dash-instructions">
  <p>You will receive a 30% commission for each referral. For monthly and annual subscriptions, you will receive recurring commissions as long as the member is subscribed.amp;nbsp;</p>
</div>

<div class="table-scrollable-wrapper">
  <table class="table">
    <thead>
    <tr>
      <th>
        <span id="affiliate-payments-compensation"><span class="default">Compensation</span></span>
      </th>
      <th>
        <span id="affiliate-payments-commissions-due"><span class="default">Due</span></span>
      </th>
      <th>
        <span id="affiliate-payments-commissions-upcoming"><span class="default">Upcoming</span></span>
      </th>
      <th>
        <span id="affiliate-payments-commissions-paid"><span class="default">Paid</span></span>
      </th>
    </tr>
    </thead>
    <tbody>
      <tr>
        <td></td>
        <td class="text-muted text-center">
          <span style="opacity: 0.5;"> nothing to show yet </span>
        </td>
        <td></td>
        <td></td>
      </tr>
    </tbody>
  </table>
</div>
            </div>
    </div>
  </div>
</div>



            </div>
          </div>
  </div>
  </div>

Вот css(большая часть важного css взята из самой начальной загрузки):

 body {
    background: #ffffff url(https://forge.swap-studio.com/assets/bg-polygon-dd7097463c1102fbf7fe55f6e00595256861740bba73750be91902f955f41f1e.png) no-repeat bottom center; /* fallback for old browsers */
    background-size: cover;
    background-attachment: fixed;
  }

  .grad-text {
    background: -webkit-linear-gradient(0deg, #555555 0, #555555 70%);
  }

  a{
      color: #002929;
  }

  /*.aff-link {*/
    /*border: 1px solid #002929;*/
  /*}*/

  /*.aff-link-2 {*/
    /*border: 1px solid #cdcdcd;*/
  /*}*/

  .aff-link-2 .copy-link {
    background-color: #cdcdcd;
    border: 1px solid #cdcdcd;
  }

  .aff-link-2 .btn-alt {
    color: #cdcdcd !important;
  }

  .copy-link {
    background-color: #002929;
    border: 1px solid #002929;
  }

  .copy-link-wide {
      background-color: #002929;
      border: 1px solid #002929;
  }

  .aff-progress b {
    color: #002929;
  }

  .change-url {
    color: #002929;
  }

  .change-url-field .btn {
    background-color: #002929;
  }

  .change-url-field .btn-alt {
    /*background-color: #002929;*/
  }

  .aff-invite input {
    border: 1px solid #002929;
  }

  .dot {
    border: (10 / 5) solid #002929;
  }

  #affiliate-invite-who {
    color: #002929;
    font-size: 1.2em;
  }

  .dash-primary-color {
    color: #002929 !important;
  }

  .button-primary {
    background-color: #002929;
    border: 1px solid #002929;
  }

  .email-input {
    border: 1px solid #002929;
  }

  .button-primary-fullwidth {
    background-color: #002929;
    border: 1px solid #002929;
    /*border-bottom: 3px solid #cdcdcd >;*/
  }

  .button-primary-flat-fullwidth {
    color: #002929;
    border: 1px solid #002929;
  }

  .comp-stats-figure {
      color: #002929;
  }

  .top-to-bottom {
      /*border-width: 6px;*/
      /*border-style: solid;*/
      /*border-color: #002929;*/
      /*-webkit-border-image:*/
      /*-webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#ffffff)) 1 100%;*/
      /*-webkit-border-image:*/
      /*-webkit-linear-gradient(#ffffff, #ffffff) 1 100%;*/
      /*-moz-border-image:*/
      /*-moz-linear-gradient(#ffffff, #ffffff) 1 100%;*/
      /*-o-border-image:*/
      /*-o-linear-gradient(#ffffff, #ffffff) 1 100%;*/
      /*border-image:*/
      /*linear-gradient(to bottom, #ffffff, #ffffff) 1 100%;*/
      /*border-right: 0px;*/
      /*border-top: 0px;*/
      /*border-bottom: 0px;*/
  }

  /* Logged in page */
.test{
    position: absolute;
    background-color:purple;
    top: 0;
    left: 0;
    width:100%;
}

Ответ №1:

Это немного зависит от того, что именно вы хотите для других элементов, но, концентрируясь на элементе с фиолетовым фоном, он в настоящее время размещается относительно второго дочернего элемента строки, поскольку ему задана позиция: относительно с помощью CSS начальной загрузки.

Этот фрагмент устанавливает для второго дочернего элемента значение position: static, чтобы фиолетовый элемент не располагался относительно него.

 <!DOCTYPE html>
<html lang="en">

<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <link rel="stylesheet" href="./example.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <style>
    .section-topleft {
      position: absolute;
      background-color: purple;
      color: #ffffff;
      width: 100%;
      height: 100px;
      top: 0;
      left: 0;
    }
    
    .container-fluid .row :nth-child(2) {
      position: static;
    }
  </style>
</head>

<body>

  <div class="container-fluid">
    <h1>Hello World!</h1>
    <p>Resize the browser window to see the effect.</p>
    <p>The columns will automatically stack on top of each other when the screen is less than 768px wide.</p>
    <div class="row">
      <div class="col-sm-4">
        <h3>Title 1 - col-sm-4</h3>
      </div>
      <div class="col-sm-4" style="background-color:lavenderblush;">
        <div class="section-topleft">
          <h3>This div should be on the top left corner of the document</h3>
        </div>
        <h3>Title 2 - col-sm-4</h3>
      </div>
      <div class="col-sm-4" style="background-color:lavender;">
        <h3>Title 3 - col-sm-4</h3>
      </div>
    </div>
  </div>

</body>

</html>

Комментарии:

1. Спасибо за ваш ответ! Я попробовал это на реальном проекте, но там статика не работает. В реальном проекте над ним намного больше дивов (вместо простого col-sm-4. Означает ли это, что фиолетовый элемент теперь находится относительно div ‘строки’?

2. Он будет расположен относительно ближайшего предка, у которого задана позиция. Не видя вашего фактического кода, я не могу знать, что это такое.

3. Извините за мой поздний ответ. Я загрузил скриншот в главном посте. Извините за размытые вещи. Это не должно быть проблемой, но просто для уверенности :). Я включил «col-md-3» на статику. Div с классом «тест» имеет атрибут абсолютной позиции. Надеюсь, вы сможете мне помочь.

4. Пожалуйста, вставьте HTML и соответствующий CSS в свой вопрос. Изображение, которое вы даете, не возвращается полностью в верхнюю часть документа и не показывает никакого соответствующего CSS. Однако я предлагаю вам сначала вернуться ко всем элементам-предкам и посмотреть, какие именно из них имеют расположение и безопасно ли их удалять.

5. Я поместил соответствующий HTML и CSS в основной пост :). Я проверил расположение элементов привязки, но, если я прав, у них нет заданного положения. Но я могу ошибаться.

Метки: