Один блок накладывается на другой css как исправить

По результатам ответов выделил решения, которые работают

1) метод, предложенный Air

использование свойства flex: https://jsfiddle.net/7py3hg7u/

.line {
display:flex;
flex-direction:row;

  width: 500px;
  min-height: 27px;
  height: auto;
  margin: 5px 0px 0px 0px;

  font-size: 18px;
  background: orange;
  border: 1px solid black;
  /*padding чтобы ты видел что родитель растягивается*/
  padding:5px;
}

.line>div:first-child{
  width: 150px;
  background: red;
}

.line>div:last-child {
  width: calc(100% - 150px);
  background: lime;
}

недостаток метода:

  • дочерние элементы занимают 100% высоты от родительского элемента
  • свойство flex не полностью поддерживается браузером IE (только 11 версией и то не до конца)

2) метод, предложенный DaemonHK:

использование в дочерних div свойства font-size, position, vertical-align, использование в родительском свойства font-size: 0px: https://jsfiddle.net/o88pfdqr/

.line {
  position: relative;
  width: 500px;
  min-height: 27px;
  margin: 5px 0px 0px 0px;
  padding: 0px;
  font-size: 0;
  background: orange;
  border: 1px solid black;
}

.line>div:first-child:not(:only-child) {
  position: relative;
  left: 0px;
  width: 150px;
  background: red;
  display:inline-block;
  font-size:18px;
  vertical-align:top;
}

.line>div:last-child {
  position: relative;
  right: 0px;
  width: calc(100% - 150px);
  background: lime;
  display:inline-block;
  font-size:18px;
  vertical-align:top;
}

недостаток метода:

  • перестало работать выравнивание справа для одного элемента (https://jsfiddle.net/o88pfdqr/1/)
  • использование font-size для дочерних элементов и обнуление его для родительского элемента

3) метод, предложенный Дмитрием Поляниным:

использование в дочерних элементах flex, а в родительском clear: https://jsfiddle.net/o88pfdqr/4/

.line {
  width: 500px;
  margin: 5px 0px 0px 0px;
  padding: 0px;
  font-size: 18px;
  background: orange;
  border: 1px solid black;
  clear:both;
}

.line>div:first-child:not(:only-child) {
  width: 150px;
  background: red;
  float: left;
  margin-bottom: 5px;
}

.line>div:last-child {
  width: calc(100% - 150px);
  background: lime;
  float: right;
  margin-bottom: 5px;
}

Недостаток метода:

  • теряется высота родительского элемента, т.е. дочерний элемент может
    стать больше родительского по высоте

Общий вывод:

Наилучший способ, как мне кажется, у AIR, но меня пугает flex своей несовместимостью (надо протестировать), при том, что я реально взаимодействую с людьми у которых чуть ли не IE6 стоит :) (утрирую немного)

Есть еще одна проблема-вопрос

Дополнительно я хотел бы обеспечить следующий функционал (тоже только листами стилей без привлечения дополнительных тегов):

если высота дочерних блоков меньше 27px, то выполняется выравнивать дочерних элементов по вертикали (middle) в родительском блоке, который 27px, а если хотя бы 1 дочерний элемент больше по высоте 27px, то выравнивание выполняется по top

Источник

Say I have three divs:

<div id="outer"></div>
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>

#one {
  position:fixed;
  top:0px;
  left:0px;
}

#two {
  width: 80%;
  height:500px;
}

#three {
  width: 80%;
  height:500px;
}

Divs «two» and «three» appear to be overlapped by div «one» because of position fixed.

1) What is the best way to make it such that they do not overlap?

2) What is the best way to make it such that my fixed div takes up 100% of the height, even if the user scrolls down? (like a sidebar, preventing any new divs that i want to run along the same side as divs two and three) Does the best way involve floats for #two and #three?

João Pimentel Ferreira's user avatar

asked Jun 5, 2013 at 21:28

Rolando's user avatar

7

By changing the position from position: fixed; to position: sticky; solved my problem.

#one{
 position: sticky;    
}

answered Nov 16, 2017 at 10:32

Chetan J Rao's user avatar

3

1:

By adding margin-left you can make sure that long fixed div doesn’t overlap the others.

#two, #three {
    margin-left:20%;
    width:80%;
    height:500px;
}

2:

Adding the bottom:0px; makes it the height of the window because it expands from the top to the bottom.

#one {    
    position:fixed;
    top:0px;
    bottom:0px;
    left:0px;   
    width:20%; 
}

Note: I also added a flexible width of 20% to the #one div so that it plays nicely with the other two flexible width divs.

Fiddle: http://jsfiddle.net/ZPRLd/

answered Jun 5, 2013 at 21:44

iambriansreed's user avatar

iambriansreediambriansreed

21.8k6 gold badges62 silver badges79 bronze badges

You can use the CSS z-index property. It worked fine on me!

#one{
  z-index:0
}
#two, #three{
  z-index: 1;
}

Since the z index of #two and #three are higher than #one, they will be on top when there is an overlapping. You may select any other integer values, as long as one index is higher than another.

enter image description here

answered Jul 16, 2018 at 10:14

João Pimentel Ferreira's user avatar

There is no way for this to be fixed, so all we can do is wait for now…

Thank me later

answered Aug 2, 2021 at 15:08

user16537394's user avatar

1

Источник

Почему блок накладывается на блок? И как это починить?
64117d8118025972959940.png
HTML CODE:

<html class="hydrated"><head><style>
  test{
    position: relative;
  }
</style>

  
    <meta charset="utf-8"><style data-styles="">ion-icon{visibility:hidden}.hydrated{visibility:inherit}</style>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test</title>
    <link href="static/style.css" rel="stylesheet" type="text/css">
  </head>
  <body id="body">
        <div id="main">
            <div id="topBar"> 
                <h4 style="padding-left: 20px"></h4>
                <div class="status online" id="status"></div>  
            </div>
            <div id="content">
                <div class="container">
                    <div id="messages">                            
                    <div class="message right"><div class="container"><p> </p><p></p><p class="timeStamp right">14:5</p></div></div><div class="message right"><div class="container"><p> </p><p></p><p class="timeStamp right">14:5</p></div></div><div class="message right"><div class="container"><p>  </p><p></p><p class="timeStamp right">14:5</p></div></div><div class="message right"><div class="container"><p> </p><p></p><p class="timeStamp right">14:5</p></div></div><div class="message right"><div class="container"><p> </p><p></p><p class="timeStamp right">14:5</p></div></div><div class="message right"><div class="container"><p> </p><p></p><p class="timeStamp right">14:5</p></div></div><div class="message right"><div class="container"><p>vf</p><p></p><p class="timeStamp right">14:5</p></div></div><div class="message right"><div class="container"><p>v</p><p></p><p class="timeStamp right">14:5</p></div></div><div class="message right"><div class="container"><p>d</p><p></p><p class="timeStamp right">14:5</p></div></div><div class="message right"><div class="container"><p>Vd</p><p></p><p class="timeStamp right">14:5</p></div></div><div class="message right"><div class="container"><p>v</p><p></p><p class="timeStamp right">14:5</p></div></div><div class="message right"><div class="container"><p>c</p><p></p><p class="timeStamp right">14:5</p></div></div><div class="message right"><div class="container"><p>vc</p><p></p><p class="timeStamp right">14:5</p></div></div><div class="message right"><div class="container"><p>v</p><p></p><p class="timeStamp right">14:5</p></div></div><div class="message right"><div class="container"><p>c</p><p></p><p class="timeStamp right">14:5</p></div></div></div>
                    <div class="bumper"></div>
                
                  <div id="input" class="test">
                      <input placeholder="Текст" id="message">
                      

                      <button onclick="sendMessage()">
                          <ion-icon name="send" role="img" class="md hydrated" aria-label="send"></ion-icon>
                      </button>
                    
                </div>
             </div>
            </div>
        </div>
    <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
    <script nomodule="" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
    <script src="https://cdn.socket.io/4.4.0/socket.io.min.js" integrity="sha384-1fOn6VtTq3PWwfsOrk45LnYcGosJwzMHv+Xh/Jx5303FVOXzEnw0EpLv30mtjmlj" crossorigin="anonymous"></script>
    <script src="static/chat.js"></script>
  
<iframe id="ms-iframe" class="no-visible   pos-bottom-left" src="chrome-extension://hfgbpkkdodfihabamnkhoaeamkdhnoec/app/ui-web/ui-web.html?protocol=https:&amp;domain=sever-for-map-game.agzamikail.repl.co" style="width: 0px; height: 0px;"></iframe><link rel="stylesheet" href="chrome-extension://hfgbpkkdodfihabamnkhoaeamkdhnoec/app/site/site.min.css"></body></html>

CSS code https://pastebin.com/B7A42wnK

Источник

Вот честное слово, стою на асфальте в лыжи обутый. То ли лыжи не идут, то ли я … какой-то не такой. Уже в который раз я вижу, как абсолютно стандартную сетку делают с помощью position: absolute. Люди, скиньте ссылку на эти уроки, которые этому учат. Потому, что я сам таких уроков не видел никогда.

Сорри за эмоции. Наболело.

По сабжу. Если задать блоку position: absolute, то остальные блоки ведут себя так, как будто бы этих блоков не существует. http://htmlbook.ru/css/position В данном примере футер прижимается к тому единственному блоку, которому position: absolute не задан. А именно к центральному. Потому, что ни левого ни правого блока футер не видит. Ну зачем вам сдался этот position: absolute. Позиционируйте блоки float-ом. а абсолютное позиционирование оставьте для случаев, в которых оно реально нужно.

Наверное можно поправить и это, но в любом случае получатся костыли.

Добавлено через 1 час 2 минуты
Вот например самая простая конструкция для трехколоночного макета с фиксированной шириной. Проще просто некуда

HTML5 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

<!DOCTYPE html>
<html>
<head>
<title>Тест-1</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
    <header>header
    </header>
    <aside>aside
    </aside>
    <article>article
    </article>
    <nav>nav    
    </nav>
    <footer>footer
    </footer>
</body>
</html>
CSS 
1
2
3
4
5
6
7
8

header, nav, article, aside, footer {display:block;}
 
body    {width:960px; margin:0 auto;}
header  {height:100px; background:#DCDCDC;}
aside   {width:200px; float:left; min-height:400px; background:#778899;}
article {width:560px; float:left; min-height:500px; background:#FFDEAD;}
nav     {width:200px; float:right; min-height:300px; background:#A52A2A;}
footer  {height:50px; clear:both;  background:#DCDCDC;}

min-height и background нужны только для того, что бы блоки сделать видимыми.

Источник

Работая с позиционированием элементов на веб-странице можно столкнуться с тем, что один блок может «наехать» на другой блок, перекрыть и сделать часть его невидимой.

Вот пример такой ситуации.

<div style="background:#ccc;">Блок 1</div>
<div style="background:#9cc; position:relative; left:20px; top:15px;">Блок 2</div>
<div style="background:#c9c;">Блок 3</div>

Больше моих уроков по HTML, CSS и верстке сайтов здесь.

«Блок 2» перекрывает «Блок 3», т.к. он находится выше по коду.

По умолчанию, на самом верху отображаются те блоки, которые находятся выше по коду. Но, что делать если нам нужно изменить порядок их отображения?

Для решения этой проблемы в css используется специальное свойство, которое называется z-index.

z-index: целое число | auto | inherit

Значением свойства z-index является целое число. Хотя в спецификации и написано, что это число может быть отрицательным, но я советую вам пользоваться только положительными числами, т.к. в старых браузерах могут быть проблемы с отображением отрицательного z-index.

Это свойство работает только для тех элементов, которые имеют свойство CSS position в значении relative, absolute или fixed.

Давайте попробуем для примера выше поменять порядок отображения блочных элементов.

Разместим «Блок 3» поверх «Блока 2».

Для этого обоим блокам присвоим свойство position:relative, для того, чтобы свойство z-index начало работать.

<div style="background:#ccc;">Блок 1</div>
<div style="background:#9cc; position:relative; left:20px; top:15px;">Блок 2</div>
<div style="background:#c9c; position:relative; z-index:1">Блок 3</div>

Все, теперь «Блок 3» отображается поверх «Блока 2».

Довольно полезное свойство и позволяет решать множество проблем верстки.

Больше моих уроков по HTML, CSS и верстке сайтов здесь.

Источник

Понравилась статья? Поделить с друзьями:

Не пропустите также:

  • Как найти енота симс 3
  • Как найти производную в точке касания если
  • Как исправить ошибку код 101
  • Как найти пропорцию чисел 6 класс
  • Как найти файл mstsc

    • 0 0 голоса
    Рейтинг статьи
    Подписаться
    Уведомить о
    guest

    0 комментариев
    Старые
    Новые Популярные
    Межтекстовые Отзывы
    Посмотреть все комментарии