Can you change a css property for a specific page?-CodePudding

So I have a problem with my footer: I have two pages which use specific position values and due to them being different to all the others, the footer when set to

position: absolute
bottom: 0

isn't sticking to the bottom and is buggy... for the 2 pages the footer will stick to the bottom when I use:

position: relative
    bottom: 0

so now I am asking if there is a way to change absolute to relative for the 2 specific pages?

THE FOOTER IS IN A SHARED FOLDER WHICH MEANS THAT IT IS AUTOMATICALLY PLACED INTO ALL PAGES

CodePudding user response：

You can add a class to the body depending of your current page to add css in specific cases :

.footer{
    position: absolute;
    bottom: 0;
}
.login .footer, .shop .footer{
    position: relative;
}

html :

<body >
    <div ></div>
</body>

CodePudding user response：

<div style = "position: absolute; bottom:0; ">

and For another tag

<div style = "position: relative; bottom:0; ">

Using Inline CSS

CodePudding user response：

My advice would be to, to those two specific pages add one more class which has

position: realtive; !important

this way it will override the absolute positioning the base class has.

CodePudding user response：

You can use inline css for that pages like this:

page1:

<div style = "position: relative; bottom:0; ">

page2:

<div style = "position: absolute; bottom:0; ">