css-position | 易学教程

Prevent flexbox list items changing width of parent when hover over children

阅读更多关于 Prevent flexbox list items changing width of parent when hover over children

I have a series of list items and some have a child list, containing sub navigation links. I'm using CSS to create a hover effect by having display: none on the child <ul> and then setting to display: block when hovering. However this has the undesired effect of making the parent <li> grow during hover. Is there a way to prevent this? When hovering over the <li> items that have no child lists then their width remains the same. <ul class="flex unstyled-list"> <li><a href="/">link</a></li> <li><a href="/" target="_blank">link 2</a></li> <li> <a href="/">parent 1</a> <ul class="unstyled-list">

hover-menu in right side of fixed div

阅读更多关于 hover-menu in right side of fixed div

I have a div with a fixed position (a top panel) which shall also contain a settings menu at the far right (currently via floating). When hovering over the settings-image, I want to display a menu below the image. I want the menu to be aligned to the right side just like the image. <div id="panel" style="position:fixed"> <panel-entry 1> <panel-entry 2> <panel-entry n> <div id="settings" style="float:right/snapped to the right side> <img src=settings> <ul> <li>setting 1</li> <li>setting 2</li> <li>setting n</li> </ul> </div> </div> Any idea using jQuery very much appreciated, feel free to

Prevent flexbox list items changing width of parent when hover over children

阅读更多关于 Prevent flexbox list items changing width of parent when hover over children

问题 I have a series of list items and some have a child list, containing sub navigation links. I'm using CSS to create a hover effect by having display: none on the child <ul> and then setting to display: block when hovering. However this has the undesired effect of making the parent <li> grow during hover. Is there a way to prevent this? When hovering over the <li> items that have no child lists then their width remains the same. <ul class="flex unstyled-list"> <li><a href="/">link</a></li> <li>

CSS Flexbox: a centered child overflows a parent with position fixed

阅读更多关于 CSS Flexbox: a centered child overflows a parent with position fixed

How can I properly center the #content without overflowing the #container ? margin: auto kinda works, but looks like a hack to me, I would like not to use any margins with CSS Flexbox. Keep in mind that the #container has position: fixed . Here's the code demonstrates the issue: [View in JSFiddle ↗] document.getElementById('content').innerHTML = [...Array(100).keys()].join('<br>') #container { position: fixed; background: lightblue; top: 0; bottom: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: center; overflow: auto; } #content { border: 1px solid green; /*

position: fixed overlapping page

阅读更多关于 position: fixed overlapping page

问题 Here is the fiddle. I am making a grocery list web app, and I am making the top div a fixed position. When I do this, the div seems to overlap the rest of the page. I have tried using two positions in the css ( position: relative; position: fixed ) but this doesn't let the div stay fixed. CSS (for the div): #top { width: 100%; height: 40px; background: #96f226; text-align: center; font-size: 30px; color: #252525; position: relative; position: fixed; } HTML (for the div): <div id='top'>Kitchen

How to align two columns of text in CSS

阅读更多关于 How to align two columns of text in CSS

问题 I'm having some trouble lining up some text. I need two columns, one with numbers and one with text, like so: 1 Entry one 2 Entry two 3 Entry three 4 Entry five 5 Entry six The left column is Georgia and the right column is Arial (slightly different font sizes). I could have a container div for each row and absolutely position the number and text paragraphs to be at the top or bottom of these, which works fine. The problem is this means I have to give each row a fixed height so that it

Toggle position fixed depending on scroll position

阅读更多关于 Toggle position fixed depending on scroll position

问题 I have the following code which fixes the position of a menu at the point that it is going to scroll off the top of the page. $(function () { var msie6 = $.browser == 'msie' && $.browser.version < 7; if (!msie6) { var top = $('.menu').offset().top - parseFloat($('.menu').css('margin-top').replace(/auto/, 0)); $(window).scroll(function (event) { var y = $(this).scrollTop(); if (y >= top) { $('.menu').addClass('fixed'); } else { $('.menu').removeClass('fixed'); } }); } }); css .container {

Display element outside the nested div while visibility stays hidden

阅读更多关于 Display element outside the nested div while visibility stays hidden

I want to achieve this. Keep an eye on the top text 'Happy Fruit' . I want to be overlayed of the box while it's nested inside it. body { background: yellow; padding: 50px; } .slider { width: 100%; height: 650px; margin-top: 40px; background: orange; box-shadow: 0 0 78px 11px #F3286B; } h1, h2 { text-transform:uppercase; color: red; } h1 { font-size: 11vw; } h2 { font-size: 7vw; } <body> <div class="slider"> <h1> Happy Fruit </h1> <h2> HELLO WORLD </h2> </div> </body> If I then go and add a margin-top: -50px; to the h1 the text will stay inside the div, but how can I make it going above

Finding the full height of the content of a page/document that can have absolutely positioned elements

阅读更多关于 Finding the full height of the content of a page/document that can have absolutely positioned elements

I'm trying to get the height of a page (which might be loaded in an iframe) that has absolutely positioned elements that extend below the normal bottom of the page. Here are the things I've tried: document.body.scrollHeight document.body.offsetHeight document.documentElement.clientHeight document.documentElement.scrollHeight document.documentElement.offsetHeight $(document.documentElement).height() $("html").outerHeight() $("body").outerHeight() $(document.html).height() None of these pay attention to the absolutely positioned elements. Another way to ask this question: How do I find the

Why are these inline-block divs wrapping in spite of their parent having overflow-x:scroll?

阅读更多关于 Why are these inline-block divs wrapping in spite of their parent having overflow-x:scroll?

问题 In this SSCCE, .wrapper , which is parent, is given overflow-x:scroll . All the child dvivs are given display:inline-block . I was expecting the child divs to appear in a single row, with the fifth and sixth .item not visible until the I scroll rightwards. But instead, the fifth and the sixth .item wrap to the next line. The question is why, and what should I do about it? * { margin: 0px; padding: 0px; border: 0px none; background: transparent none repeat scroll 0% 0%; font-size: 100%;