Блог

Главная - Вопросы по программированию - Как наложить div, не влияя на положение других элементов div

Как наложить div, не влияя на положение других элементов div

#html #css

#HTML #css

Вопрос:

Я пытаюсь добавить wrapperleft и wrapperright divs внутри bareEditorial div, не влияя на позиционирование любого из элементов внутри bareEditorial div. Я хочу, чтобы курсор переместился с левых 50% области просмотра на правые 50% в этом div

У кого-нибудь есть какие-либо предложения о том, как этого добиться?

Вот моя ручка https://codepen.io/anon/pen/XQeGMZ

 .wrapperleft {
  width: 50vw;
  display: inline-block;
  cursor: url("data:image/svg xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iNDBweCIgaGVpZ2h0PSIyNnB4IiB2aWV3Qm94PSIwIDAgNDAgMjYiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI CiAgICA8IS0tIEdlbmVyYXRvcjogU2tldGNoIDQxLjEgKDM1Mzc2KSAtIGh0dHA6Ly93d3cuYm9oZW1pYW5jb2RpbmcuY29tL3NrZXRjaCAtLT4KICAgIDx0aXRsZT5TaGFwZTwvdGl0bGU CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxkZWZzPjwvZGVmcz4KICAgIDxnIGlkPSJQYWdlLTEiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPgogICAgICAgIDxwb2x5Z29uIGlkPSJTaGFwZSIgZmlsbD0iIzAwMDAwMCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMjAuMDAwMDAwLCAxMi44MDIwMDApIHNjYWxlKC0xLCAxKSB0cmFuc2xhdGUoLTIwLjAwMDAwMCwgLTEyLjgwMjAwMCkgIiBwb2ludHM9IjI3LjE5OCAyNS42MDQgMzkuNDk0IDEzLjMwOCA0MCAxMi44MDIgMzkuNDk0IDEyLjI5NiAyNy4xOTggMCAyNi4xODUgMS4wMTIgMzcuMjYgMTIuMDg2IDAgMTIuMDg2IDAgMTMuNTE4IDM3LjI2IDEzLjUxOCAyNi4xODUgMjQuNTkyIj48L3BvbHlnb24 CiAgICA8L2c Cjwvc3ZnPg=="), auto;
}

.wrapperright {
  width: 50vw;
  display: inline-block;
  float: right;
  cursor: url("data:image/svg xml;base64,PHN2ZyB3aWR0aD0nNDAnIGhlaWdodD0nMjYnIHZpZXdCb3g9JzAgMCA0MCAyNicgeG1sbnM9J2h0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnJz48cGF0aCBkPSdNMjcuMTk4IDI2LjYwNGwxMi4yOTYtMTIuMjk2LjUwNi0uNTA2LS41MDYtLjUwNkwyNy4xOTggMWwtMS4wMTMgMS4wMTJMMzcuMjYgMTMuMDg2SDB2MS40MzJoMzcuMjZMMjYuMTg1IDI1LjU5MnonLz48L3N2Zz4K"), auto;
} 
 <div class="wrapperleft" onclick="plusSlides(-1)"></div>
<div class="wrapperright" onclick="plusSlides(1)"></div>

<div class="bareEditorial">

  <div class="slideshow-container">
    <h1>Bare Boutique Campaign</h1>
    <div class="mySlides fade">
      <div class="image">
        <img src="https://static1.squarespace.com/static/5a24d00449fc2b2179f0b620/t/5c7118acc830251242312b94/1550915797860/web 7.jpg?format=2500w" onclick="plusSlides(1)">
      </div>

    </div>

    <div class="mySlides fade">
      <div class="image">
        <img src="https://static1.squarespace.com/static/5a24d00449fc2b2179f0b620/5c7116541905f442e8f008e0/5c7124951905f442e8f048fd/1550918837321/web 3.jpg?format=1000w" onclick="plusSlides(1)">
      </div>
    </div>

    <div class="mySlides fade">
      <div class="image">
        <img src="https://static1.squarespace.com/static/5a24d00449fc2b2179f0b620/t/5c711846ec212dd3a55665b8/1550915727165/web 5.jpg?format=2500w" onclick="plusSlides(1)">
      </div>
    </div>

    <div class="nextprevious">
      <div class="numbertext">(<span>3</span> / <span>3</span>)</div>
    </div>
  </div>
</div>

Ответ №1:

Привет, вы можете использовать «position: absolute» в качестве свойства css для настройки Divs, не затрагивая другие элементы.

Я отредактировал ваш css, вы можете просмотреть его n заменить и проверить один раз,

 .wrapperleft {
    width: 50vw;
    cursor: url(data:image/svg xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiP…M3LjI2IDEzLjUxOCAyNi4xODUgMjQuNTkyIj48L3BvbHlnb24 CiAgICA8L2c Cjwvc3ZnPg==), auto;
    height: 50px;
    background: blue;
    position: absolute;
    left: 0;
}

.wrapperright {
    width: 50vw;
    float: right;
    cursor: url(data:image/svg xml;base64,PHN2ZyB3aWR0aD0nNDAnIGhlaWdodD0nMjYnIHZpZXdCb3g9J…4wMTJMMzcuMjYgMTMuMDg2SDB2MS40MzJoMzcuMjZMMjYuMTg1IDI1LjU5MnonLz48L3N2Zz4K), auto;
    height: 50px;
    background: red;
    position: absolute;
    right: 0;
}
Метки: ,