CSS Overlap

What do you mean by CSS overlap ? Styles overwriting others or container overflow ?

not overlap but css confilict . i have 2 css file which is bootstrap and other 3rd party template . when i mix the styles, all styles messed up . do you know any tricks to resolve the conflict ?

Have you imported bootstrap stylesheet(s) first and then your theme's stylesheet(s) ?

sorry again for my mistake . its not bootstrap . its semantic react . this is my current code . i merge css file into all.css

mix.react(['resources/assets/js/app.js'], 'public/js')
    .sass('resources/assets/sass/app.scss', 'public/css')
    .styles(['resources/assets/vendor/semantic/dist/semantic.css',
    'resources/assets/css/animate.css','resources/assets/css/workwise/style.css'],'public/css/all.css')
    .webpackConfig({
        output: {
            publicPath: '/',
            chunkFilename: `generated/chunks/[name]${mix.config.inProduction ? '.[chunkhash].chunk.js' : '.chunk.js'}`,
        }
    });

Which stylesheets are conflicting exactly ? All of them or specific ones ? What happens and what do you expect ? (Just trying to get as much info as I can)

conflict between semantic.css and style.css . for animate.css, both of template has it . but i mix the newest version only .

// example directory 

public
    - css
        all.css
resources
    - assets
        - css
            animate.css ( version 2.5 )
            - workwise
                animate.css ( version 2.4 )
                style.css
        -vendor
            - semantic
                - dist
                    semantic.css

my problem is i compiled new css file which is workwise for my project . some of semantic component i need to use so i need to keep it and the new css file is the newest css that i need to follow .

my expectation is i can run correctly on semantic component and 3rd party template css without any conflict .

Not sure exactly what you mean but let's say you have a element with two classes

<style>
    .boxed {
        border: 1px solid black;
        border-radius: 5px;
    }

    .rounded {
        $border-radius: 10px;
    }
</style>

<p class="boxed rounded">

The above <p> would get rounded 10px corners.

If you change the order of the classes on the element.

<p class="rounded boxed">

It would get the 5px rounded corners.

You can use the !important keyword to override the default cascade.

    .boxed {
        border: 1px solid black;
        border-radius: 5px !important;
    }

That would make the above example use rounded 5px corners. This is a bad practice.

If you have the same class name in several of those files it will give you strange effects since they will all be added.

thankyou for your respond , i think my problem is i have the same class name in those files . semantic has the same predefine with 3rd party . how can I resolve it ?

I suggest you use a prefix on one of them. Bootstrap might become bs. So to use it you do bs-row instead of just row.

https://stackoverflow.com/questions/29003264/customize-twitter-bootstrap-classnames

You're trying to mix two CSS frameworks and the conflict is likely coming from the fact that many class names are the same. You could either stick to one single framework or as @tray2 has said, prefix your frameworks.

Using more than one framework seems odd to me. You're probably better off sticking with a single one, and making the edits you need. Two frameworks is a lot of duplicate CSS, or even unused CSS for that matter.

Using more than one frameworks is a really strange decision, but in this case it is completely justified.

Using more than one framework seems Nox Vidmate VLC odd to me. You're probably better off sticking with a single one, and making the edits you need. T

I am working as a UI/UX designer in a website design agency and I solve this problem using these query on Stack Overflow, may this will also help you. https://stackoverflow.com/questions/5311706/position-fixed-content-overlapping-problem