Toastr JS appears in source code but is invisible

Question

I am trying to use Toastr JS, initially i could not figure out why it just wont appear but it actually does(figured out by changing Timeout to 10min and looking at the source code) but it is invisible and i have no idea why. It Appears below everything instead of top right.

My Template code

{% block javascript %}
{% if messages %}
        {% for message in messages %}
            {% if message.tags == 'success'%}
                <script> toastr.success("{{ message }}")</script>
            {% elif message.tags == 'info' %}
                <script> toastr.info("{{ message }}")</script>
            {% elif message.tags == 'warning' %}
                <script> toastr.warning('{{ message }}")</script>
            {% elif message.tags == 'error' %}
                <script>
                toastr.options = {
                closeButton: false,
                debug: false,
                newestOnTop: false,
                 progressBar: true,
                 positionClass: "toast-top-right",
                 preventDuplicates: false,
                 onclick: null,
                 showDuration: "9000",
                 hideDuration: "1000",
                 timeOut: "0",
                 extendedTimeOut: "1000",
                 showEasing: "swing",
                 hideEasing: "linear",
                 showMethod: "fadeIn",
                 hideMethod: "fadeOut"
                }
                toastr.error("{{ message }}")

            </script>
            {% endif %}
        {% endfor %}
{% endif %}
{% endblock %}

Answer 1

The Problem was in

 <link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" rel="text/css" media="all">

needed to be replaced with

<link href="https://cdnjs.cloudflare.com/ajax/libs/toastr.js/latest/toastr.min.css" rel="stylesheet" media="all">

additional: One MUST always use standard JQUERY when using Toastr JS(min version of Jquery is not compatible with Toastr)