保持按钮固定,但身体内部

时间:2018-10-11 08:06:40

标签: html css

body{
    max-width:1366px;
}

.gotop{
    position:fixed;
    right:9px;
    bottom:7px;
    cursor:pointer;
    width:25px;
}

gotop是用于在顶部滚动页面的按钮,并且不能滚动,即必须为fixed

显示器大于1366像素时出现问题。该按钮离身体很远。

如何将其固定在身体内部?

4 个答案:

答案 0 :(得分:1)

尝试一下

body{
    max-width:1366px;
    background:#f1f1f1;
}

.gotop{
    position:absolute;
    right:25px;
    bottom:25px;
    cursor:pointer;
}
<body>
<button class='gotop'>TOP</button>
</body>

答案 1 :(得分:0)

我不建议在主体上使用max-width ...您应该将其放在div上,而不是将所有内容包装在页面中。

然后将按钮放在包装器的底部,并应用以下CSS。调整值以在需要时获得更好的排名。

<div class="wrapper">
  <div class="holder">
    <button class="button">Test</button>
  </div>
</div>
import numpy as np
from sklearn.model_selection import train_test_split
from sklearn.metrics import classification_report
from sklearn.naive_bayes import GaussianNB
from sklearn.metrics import confusion_matrix
import pandas as pd
import matplotlib.pyplot as plt
from sklearn.preprocessing import LabelEncoder

class bayesNaive:
    def __init__(self, dataTrainInput):
        self.data = pd.read_csv(dataTrainInput, delimiter=";", encoding="latin-1")
def encoderLabel(self):
    self.lb = LabelEncoder()
    df = pd.DataFrame(self.data,
                      columns=["laboratory_registration_id", "Albumin", "Asam Urat", "Basofil", "Basofil Absolut","BE", "Berat Jenis", "Besi (Fe/iron)", "Eosinofil", "Eosinofil Absolut", "Eritrosit","Ferritin", "Free T4", "Glukosa Darah 2 jam PP", "Glukosa Darah Puasa","Glukosa Darah Sewaktu", "Hb-A1c", "Hematokrit", "Hemoglobin", "Kalium (K)","Klorida (Cl)", "Kolesterol HDL", "Kolesterol LDL", "Kolesterol Total", "Kreatinin", "Leukosit", "Limfosit", "Limfosit Absolut", "MCH", "MCHC", "MCV", "Monosit", "Monosit Absolut", "MPV", "Natrium (Na)", "Neutrofil Absolut", "Neutrofil Segmen", "O2 Saturasi", "pCO2", "PDW", "pH", "pO2", "RDW-CV", "RDW-SD", "T CO2", "TIBC","T3 Total", "T4 Total", "Trigliserida", "Trombosit", "Troponin T", "TSH", "Ureum", "Age", "Gender", "Disease"])
    data1 = self.data["Bakteri"]
    data2 = self.data["Bilirubin"]
    data3 = self.data["Blood"]
    data5 = self.data["Epitel"]
    data6 = self.data["Eritrosit Urin"]
    data7 = self.data["Faktor Rheumatoid (RF)"]
    data8 = self.data["Glukosa"]
    data9 = self.data["HBsAg"]
    data10 = self.data["Kejernihan"]
    data11 = self.data["Keton"]
    data12 = self.data["Kristal"]
    data13 = self.data["Leukosit Urin"]
    data14 = self.data["Nitrit"]
    data15 = self.data["Protein"]
    data16 = self.data["Silinder"]
    data17 = self.data["Urobilinogen"]
    data18 = self.data["Warna"]

    x1 = self.lb.fit_transform(data1)
    x2 = self.lb.fit_transform(data2)
    x3 = self.lb.fit_transform(data3)
    x5 = self.lb.fit_transform(data5)
    x6 = self.lb.fit_transform(data6)
    x7 = self.lb.fit_transform(data7)
    x8 = self.lb.fit_transform(data8)
    x9 = self.lb.fit_transform(data9)
    x10 = self.lb.fit_transform(data10)
    x11 = self.lb.fit_transform(data11)
    x12 = self.lb.fit_transform(data12)
    x13 = self.lb.fit_transform(data13)
    x14 = self.lb.fit_transform(data14)
    x15 = self.lb.fit_transform(data15)
    x16 = self.lb.fit_transform(data16)
    x17 = self.lb.fit_transform(data17)
    x18 = self.lb.fit_transform(data18)

    df1 = pd.DataFrame(x1, columns=['Bakteri'])
    df2 = pd.DataFrame(x2, columns=['Bilirubin'])
    df3 = pd.DataFrame(x3, columns=['Blood'])
    df5 = pd.DataFrame(x5, columns=['Epitel'])
    df6 = pd.DataFrame(x6, columns=['Eritrosit Urin'])
    df7 = pd.DataFrame(x7, columns=['Faktor Rheumatoid (RF)'])
    df8 = pd.DataFrame(x8, columns=['Glukosa'])
    df9 = pd.DataFrame(x9, columns=['HBsAg'])
    df10 = pd.DataFrame(x10, columns=['Kejernihan'])
    df11 = pd.DataFrame(x11, columns=['Keton'])
    df12 = pd.DataFrame(x12, columns=['Kristal'])
    df13 = pd.DataFrame(x13, columns=['Leukosit Urin'])
    df14 = pd.DataFrame(x14, columns=['Nitrit'])
    df15 = pd.DataFrame(x15, columns=['Protein'])
    df16 = pd.DataFrame(x16, columns=['Silinder'])
    df17 = pd.DataFrame(x17, columns=['Urobilinogen'])
    df18 = pd.DataFrame(x18, columns=['Warna'])

    return pd.concat([df1, df2, df3, df5, df6, df7, df8, df9, df10, df11, df12, df13, df14, df15, df16, df17, df18, df], axis=1)

def decodeLabel(self, result):
    data1 = result["Bakteri"]
    data2 = result["Bilirubin"]
    data3 = result["Blood"]
    data5 = result["Epitel"]
    data6 = result["Eritrosit Urin"]
    data7 = result["Faktor Rheumatoid (RF)"]
    data8 = result["Glukosa"]

    x1 = self.lb.inverse_transform(data1)
    x2 = self.lb.inverse_transform(data2)
    x3 = self.lb.inverse_transform(data3)
    x5 = self.lb.inverse_transform(data5)
    x6 = self.lb.inverse_transform(data6)
    x7 = self.lb.inverse_transform(data7)
    x8 = self.lb.inverse_transform(data8)

    df1 = pd.DataFrame(x1, columns=['Bakteri'])
    df2 = pd.DataFrame(x2, columns=['Bilirubin'])
    df3 = pd.DataFrame(x3, columns=['Blood'])
    df5 = pd.DataFrame(x5, columns=['Epitel'])
    df6 = pd.DataFrame(x6, columns=['Eritrosit Urin'])
    df7 = pd.DataFrame(x7, columns=['Faktor Rheumatoid (RF)'])
    df8 = pd.DataFrame(x8, columns=['Glukosa'])

    return pd.concat([df1, df2, df3, df5, df6, df7, df8], axis=1)

def split_label(self):
    res = self.encoderLabel()
    X = res.iloc[:, :-1].values
    Y = res['Disease'].values
    return X, Y

def test_split(self):
    X, Y = self.split_label()
    X_train, X_test, Y_train, Y_test = train_test_split(X,Y, test_size=0.2, random_state=42)
    return X_train, X_test, Y_train, Y_test

def Classify_lab(self):
    try:
        X_train, X_test, Y_train, Y_test = self.test_split()
        # print(X_test.shape)
        model = GaussianNB()
        model_train = model.fit(X_train, Y_train)

        model_score = model_train.score(X_test, Y_test)
        accuracy = round(model_score * 100, 2)
        predicted = model_train.predict(X_test)
        Y_prob = model_train.predict_proba(X_test)
        report=classification_report(Y_test, predicted)
        conf_m = confusion_matrix(Y_test, predicted)

        test = pd.DataFrame(X_test)

        test.columns = ["Bakteri", "Bilirubin", "Blood", "Epitel","Eritrosit Urin","Faktor Rheumatoid (RF)", "Glukosa", "HBsAg", "Kejernihan", "Keton", "Kristal", "Leukosit Urin", "Nitrit", "Protein", "Silinder", "Urobilinogen", "Warna", "laboratory_registration_id", "Albumin", "Asam Urat", "Basofil", "Basofil Absolut","BE", "Berat Jenis", "Besi (Fe/iron)", "Eosinofil", "Eosinofil Absolut", "Eritrosit","Ferritin", "Free T4", "Glukosa Darah 2 jam PP", "Glukosa Darah Puasa","Glukosa Darah Sewaktu", "Hb-A1c", "Hematokrit", "Hemoglobin", "Kalium (K)","Klorida (Cl)", "Kolesterol HDL", "Kolesterol LDL", "Kolesterol Total", "Kreatinin","Leukosit", "Limfosit", "Limfosit Absolut", "MCH", "MCHC", "MCV", "Monosit","Monosit Absolut", "MPV", "Natrium (Na)", "Neutrofil Absolut", "Neutrofil Segmen","O2 Saturasi", "pCO2", "PDW", "pH", "pO2", "RDW-CV", "RDW-SD", "T CO2", "TIBC","T3 Total", "T4 Total", "Trigliserida", "Trombosit", "Troponin T", "TSH", "Ureum","Age", "Gender"]
        labels = pd.DataFrame(predicted)
        probability = pd.DataFrame(Y_prob)
        labels.columns = ["Disease"]
        probability.columns = ["Diabetes mellitus", "Ginjal","Jantung", "Thalassemia"]
        result = pd.concat([test, labels, probability], axis=1)
        decode = self.decodeLabel(X_test)
        print(decode)
        exit()
        return [result, str(accuracy), report, conf_m]
    except ValueError as v:
        print(v)
    except FileNotFoundError:
        print('File not found')

if __name__ == '__main__':
    datatestingInput = "testing.csv"
    dataTrainInput = "perc4.csv"
    obj = bayesNaive(dataTrainInput)
    print(obj.Classify_lab())
    # print(obj.Testing_lab(datatestingInput))

答案 2 :(得分:0)

您问的是相当古老的做事方式,但可以实现。

  • 设置主体的宽度。
  • 将固定元素设置为居中。
  • 通过主体和固定元素的宽度偏移中心。

html,
body {
  position:relative;
  height: 100%;
  max-width: 200px;
  margin: 0 auto;
  border:1px solid #111;
}

.gotop {
  position: fixed;
  left:50%;
  bottom: 7px;
  cursor: pointer;
  width:40px;
  background:#eee;
  margin-left:60px;/*half width of body minus width of gotop*/
}
<div class="gotop">TOP</div>

答案 3 :(得分:0)

一种可能的解决方案是忽略固定按钮的toprightbottomleft值。这样,它将被粘贴到容器上:

.container {
  position: relative;
  max-width: 800px;
  height: 200vh; /* for scrolling demo */
  margin: 0 auto;
  border: 1px solid black;
}

.button-wrapper {
  position: absolute;
  right: 35px; /* button width plus margin */
  top: 30%; /* or whatever you need */
}

.button {
  position: fixed;
  width: 25px;
  height: 25px;
  cursor: pointer;
  background: black;
}
<div class="container">
  <div class="button-wrapper">
    <div class="button"></div>
  </div>
</div>