I am trying to position a logo just above the nav overlaying a responsive carousel. The trouble is, depending on the window size, the logo doesn't stay anchored to the nav. I don't know how to even approach this problem. Here is the project I am currently working on. Is there even a way to accomplish this?
How to overlay div on top of responsive carousel
1.2k Views Asked by Beverly Lodge At
1
There are 1 best solutions below
Related Questions in CSS
- CSS Class is not applying to element (border width,color,and style attributes)
- How do I find the fonts that are not loading in a CORS situation ( MoovWeb )?
- Positioning child at bottom of parent with scroll
- Play multiple audio files in a slider
- How to set text over image?
- Website zoomed out on Android default browser
- Writing/Overwriting to specific XML file from ASP.NET code behind
- My navbar is not expanding after collapse
- when a checkbox is checked how to display a different hidden element using javascript
- Gaps Vertically Using Dividers
- CSS: Preventing a property to affect on element until the end of transition
- Polygon Button with pure CSS
- transform-origin doesnt apply in safari
- show/hide multiple div tags at once and change the size of the remaining div tag
- Mask the image/maps/div (circle) using css and jquery
Related Questions in CSS-POSITION
- Two continuous position relative are out of normal
- Position element without using absolute positioning
- Float inside an absolute div inside a relative inline-block div
- Absolute position in td on Android 2.3.3
- HTML & CSS - Absolute positioned div overflows relative div, unexpected result
- How to allow list positioned absolute, to break out of fixed element?
- Starting a css site but format issues
- Fixed Menu at the Top of Webpage that Changes Size as Window Resizes
- Overflow-y and Fixed Positioned Bug Fix in Internet Explorer
- Absolute div's width becomes so small that the text is wrapping
- Padding-bottom not works for fixed div
- Nested fixed element not work in IE
- How to position text over an image in a grid
- Is it possible to grow a div if it has relative position element?
- Positioned divs spilling out of container
Related Questions in RESPONSIVE-SLIDES
- Responsive Slides - overlaps another div when resized
- Camera slider issue
- Bootstrap Carousel Isn't Responsive in Full Screen
- FlexSlider adding gap to right of page
- Duplicate javascript for Codrops MULTI-LEVEL PUSH MENU
- Responsive Slider that supports image map and has a lot of transition
- A centered swiper slider/owl carousel with variable aspect ratio images
- ResponsiveSlides.js custom mouseover controls and other functionality
- ResponsiveSlides.js slideshow not being called
- Responsive content slider with jquery
- Jcarousel basic, make it responsive
- Making Materialize slider responsive
- ResponsiveSlides.js not working in https protocol
- Full-Width-Responsive-jQuery-Slider not working properly?
- responsiveslides.js - get current slide
Trending Questions
- UIImageView Frame Doesn't Reflect Constraints
- Is it possible to use adb commands to click on a view by finding its ID?
- How to create a new web character symbol recognizable by html/javascript?
- Why isn't my CSS3 animation smooth in Google Chrome (but very smooth on other browsers)?
- Heap Gives Page Fault
- Connect ffmpeg to Visual Studio 2008
- Both Object- and ValueAnimator jumps when Duration is set above API LvL 24
- How to avoid default initialization of objects in std::vector?
- second argument of the command line arguments in a format other than char** argv or char* argv[]
- How to improve efficiency of algorithm which generates next lexicographic permutation?
- Navigating to the another actvity app getting crash in android
- How to read the particular message format in android and store in sqlite database?
- Resetting inventory status after order is cancelled
- Efficiently compute powers of X in SSE/AVX
- Insert into an external database using ajax and php : POST 500 (Internal Server Error)
Popular Questions
- How do I undo the most recent local commits in Git?
- How can I remove a specific item from an array in JavaScript?
- How do I delete a Git branch locally and remotely?
- Find all files containing a specific text (string) on Linux?
- How do I revert a Git repository to a previous commit?
- How do I create an HTML button that acts like a link?
- How do I check out a remote Git branch?
- How do I force "git pull" to overwrite local files?
- How do I list all files of a directory?
- How to check whether a string contains a substring in JavaScript?
- How do I redirect to another webpage?
- How can I iterate over rows in a Pandas DataFrame?
- How do I convert a String to an int in Java?
- Does Python have a string 'contains' substring method?
- How do I check if a string contains a specific word?
The problem is that your logo (I assume you meant the transparent white round logo) is absolute positioned to the top of the browser, AND you're trying to make its position move with the resizing carousel. Try moving the logo inside the
#slider1_containerand absolute position, bottom:0 (instead of top:0)This will force it to stick to the bottom of the carousel, regardless of the height of the slider, so it will appear to move with it.
Then, you've got the issue of resizing the logo to shrink with the window as well. If you set the logo's width to a percentage, and its height to auto, with a max-width set to whatever the greatest size you want to allow it to become, then that should manage that.