предотвратить заполнение фона background-color в дочерний элемент - PullRequest
Новая
       15

предотвратить заполнение фона background-color в дочерний элемент

0 голосов
/ 19 июня 2019

Я много гуглил, но не могу найти ответ там или здесь на ТАК.Мне нужно выяснить, как предотвратить переполнение фонового цвета в его дочерний элемент. Дочерний элемент не может сдвинуться с места .

Я пробовал переполнение: скрытый, z-index и почти все.

Это определенно прощечтобы просто увидеть jsfiddle: https://jsfiddle.net/so23hbf0/3/

HTML: 

<div class="navbar">
<a href="#home">Home</a>
<a href="#news">News</a>
<div class="dropdown">
    <a href="#" class="dropbtn">Books & Media</a>
    <div class="dropdown-content">
        <div class="header">
            <h2>Mega Menu</h2>
        </div>   
    </div>
</div>

CSS: 

.navbar {
    overflow: hidden;
    background-color: yellow;
 }

.navbar a {
    padding: 2rem 1.6rem;
  overflow: hidden;
}

.dropdown {
    overflow: hidden;
    display: inline;
}

.navbar a:hover {
    background-color: black;
}

.dropdown-content {
    background-color: gray;
}

Обратите внимание, как при наведении ссылкичерный фон перетекает в серую область «Мега Меню».Но это не разливается слишком сильно.Я хочу, чтобы это не перетекло вниз.

Ответы [ 2 ]

1 голос
/ 19 июня 2019

Положение div.dropdown, поэтому вы можете использовать z-index для управления порядком стеков относительно окружающих элементов, предотвращая перекрытие меню.

Только для элементов, которые имеют значение позиции, отличное от исходного - static - их контекст суммирования может быть переставлен с помощью z-index, см. MDN для примеров. 

div.dropdown {
    /* ... */
    position: relative; 
    z-index: 1;
}

Например: https://jsfiddle.net/0mczuLsx/

0 голосов
/ 19 июня 2019 

.navbar {
	overflow: hidden;
  background-color: yellow;
}

.navbar a {
	padding: 2rem 1.6rem;
  overflow: hidden;
}

.dropdown {
	overflow: hidden;
	display: inline;
}

.navbar a:hover {
	background-color: black;
}

.dropdown-content {
	background-color: gray;
}

div.dropdown{
    /* ... */
    position: relative; 
    z-index: 1;
}
<!--Change Html to:-->

<div class="navbar">
	<a href="#home">Home</a>
	<a href="#news">News</a>
  <a href="#" class="dropbtn">Books & Media</a>
	<div class="dropdown">
		<div class="dropdown-content">
			<div class="header">
				<h2>Mega Menu</h2>
			</div>	 
		</div>
	</div> 
</div>
...