how to make layers not overlap with each other in css

Mark

I have a problem here with my website. If you can go to my website and click on the cog button on the left side, there are two images.

If you click on the first image, i set it to change .xe-clearfix css style to background-color:white, and for the 2nd image, i set it to change .xe-clearfix css style to background-color:transparent as well.

but as you can see, the menu and the image slider overlap with each other, so basically what im trying to achieve here is to make the menu on the top of the slider 'push' the slider down, so that none is overlapping when i click on the first image.

(and remove that class when click on the 2nd image of course)

and since I can't copy paste the whole website here, i will simply leave my website's address.

and bare in mind that I use wordpress like CMS called XE, and the source code might be 'mess' to some people.

but people often say that my webhosting company (cafe24) gets blocked by the ublock or adblock, I assure you that the website is completely safe and there is no harm whatsoever (you will need to disable your chrome's extension for that matter)

Thank you very much.

isherwood

The others are right that your question is off-topic without a code snippet, but I'll throw some info up since you're new.

Your header/menu element (.header_wrap xe-clearfix menu_type_1) is positioned absolutely. That means it has no affect on other elements on the page.

The element containing the slider (.camera_wrap camera_white_skin) would need to be pushed down the height of the header (about 100px) using margin or other styling. This will not be a dynamic solution as it would need to be recalculated if the header height changes.

Bottom line: This layout would need substantial revision to do what you describe. It might be better to start with a different template that has a fixed, separate header bar.

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at
0

Comments

0 comments
Login to comment

Related

From Dev

Angular 2 make components overlap each other

From Dev

How to make a div next to each other in CSS

From Dev

How to fix two label overlap each other

From Dev

How to make Toolbar not overlap other content in Android?

From Dev

How to make an transparent element overlap other elements?

From Dev

How to make an transparent element overlap other elements?

From Dev

CSS vertical DIVs overlap each other (dynamic sizes, live example)

From Dev

HTML/CSS - How to make text-overflow in line with each other?

From Dev

Fragments contents overlap each other

From Dev

Android notifications overlap each other

From Dev

Bootstrap - Columns overlap each other

From Dev

How to Fill color of Google Maps data layers on top of each other?

From Dev

Is it possible to make CSS classes extend each other?

From Dev

How to solve Navbar overlap with body content or other page in CSS

From Dev

css: How to make elements not to overlap + automatically place them in a relevant position

From Dev

How to make alerts overlap?

From Dev

How to make balls ignore collisions with each other

From Dev

How to make 2 images on top of each other

From Dev

how to make two classes friend of each other?

From Dev

How to make three arrays relate to each other

From Dev

How to make balls ignore collisions with each other

From Dev

How to make images INLINE to each other

From Dev

How to make buttons next to each other?

From Dev

How to make two coordinates match each other?

From Java

3 svg images overlap each other

From Dev

Snap edges of objects to each other and prevent overlap

From Dev

Two relative divs overlap each other

From Dev

.YAML-tmLanguage strings overlap each other

From Dev

Snap edges of objects to each other and prevent overlap

Related Related

  1. 1

    Angular 2 make components overlap each other

  2. 2

    How to make a div next to each other in CSS

  3. 3

    How to fix two label overlap each other

  4. 4

    How to make Toolbar not overlap other content in Android?

  5. 5

    How to make an transparent element overlap other elements?

  6. 6

    How to make an transparent element overlap other elements?

  7. 7

    CSS vertical DIVs overlap each other (dynamic sizes, live example)

  8. 8

    HTML/CSS - How to make text-overflow in line with each other?

  9. 9

    Fragments contents overlap each other

  10. 10

    Android notifications overlap each other

  11. 11

    Bootstrap - Columns overlap each other

  12. 12

    How to Fill color of Google Maps data layers on top of each other?

  13. 13

    Is it possible to make CSS classes extend each other?

  14. 14

    How to solve Navbar overlap with body content or other page in CSS

  15. 15

    css: How to make elements not to overlap + automatically place them in a relevant position

  16. 16

    How to make alerts overlap?

  17. 17

    How to make balls ignore collisions with each other

  18. 18

    How to make 2 images on top of each other

  19. 19

    how to make two classes friend of each other?

  20. 20

    How to make three arrays relate to each other

  21. 21

    How to make balls ignore collisions with each other

  22. 22

    How to make images INLINE to each other

  23. 23

    How to make buttons next to each other?

  24. 24

    How to make two coordinates match each other?

  25. 25

    3 svg images overlap each other

  26. 26

    Snap edges of objects to each other and prevent overlap

  27. 27

    Two relative divs overlap each other

  28. 28

    .YAML-tmLanguage strings overlap each other

  29. 29

    Snap edges of objects to each other and prevent overlap

HotTag

Archive